[createElement, appendChild]_의 개념과 사용

1] Document.createElement : 지정한 태그 이름의 HTML요소를 반환합니다.

let element = document.createElement(tagName[, options]);

tagName으로는 'div', 'ul', ... 등 html 요소가 사용됩니다.

 

2] Node.appendChild : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 

var aChild = element.appendChild(aChild);

만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)
이것은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것을 의미합니다. 그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동합니다. 

 

ex)

document.createElement로 div 태그를 만듭니다. 

그리고 template 을 만들고 ` 를 이용해서 원하는 형태를 짭니다.

아까 만들어둔 div 태그안은 element는 만들어져 있지만 내용은 비어있습니다. 이를 innerHTML로 채워줍니다.

원하는 위치 nodetest의 경우 querySelector로 지정하였고 이를 appendChild를 이용해 부모의 최하단 위치에 자식 노드를 추가합니다.

1번 버튼을 누를 때 마다 지정한 template가 계속 생기는것을 확인 할 수 있습니다.

 

참고문헌: https://developer.mozilla.org/ko/