document.getElementById().children 과 appendChild()

HTML은 트리 구조로 되어 있고. 트리구조간의 노드 간에 이동을 할때, 추가나 삭제를 할때 사용하는

함수나 속성들 중에 하나인 걸로 알고 있습니다.

아래 내용이 참고가 되시면 좋겠습니다.

-----------------------------------------------------------------------------------

Node 관련 프로퍼티              설명 (도큐먼트 탐색기능)

firstChild                               요소의 첫번째 자식 노드를 반환

lastChild                               요소의 마지막 자식 노드를 반환

previousSibling                    어떤 요소에서 현재 자식 노드와 같은 수준에 있는 이전 자식 노드를 반환

nextSibling                           어떤 요소에서 현재 자식 노드와 같은 수준에 있는 다음 자식 노드를 반환

ownerDocument                   노드를 포함하고 있는 도큐먼트의 루트 노드를 반환

parentNode                          트리 구조에서 현재 노드를 포함하고 있는 요소를 반환

nodeName                           노드의 이름을 반환

nodeType                            노드의 형식을 숫자로 반환

nodeValue                           노드의 값을 평범한 텍스트의 형태로 설정

-----------------------------------------------------------------------------------

Node 개체의 메서드                                 설명 (도큐먼트에 요소 추가, 제거)

appendChild(new node)                            자식 노드의 목록의 끝에 새로운 node 개체를 추가한다.

cloneNode(child option)                            인자로 제공한 node 개체와 똑같은 새로운 node 개체를 만든다.

                                                                  이때 선택사항으로 모든 자식 노드를 포함할 수도 있다.

hasChildNodes()                                       어떤 노드가 자식 노드를 가지고 있을 경우 true를 반환한다.

insertBefore(new node, current node)      자식 노드의 목록에서 현재 노드로 지정한 노드 앞에

                                                                 새로운 node 개체를 추가한다.

removeChild(child node)                           node 개체의 자식 노드 목록에서 하나의 자식 노드를 제거한다.

replaceChild(new child, old child)             예전 자식 node 개체를 새로운 자식 node 개체로 바꾼다.

----------------------------------------------------------------------------------