appendChild() 및 insertBefore()를 사용하여 노드 개체를 DOM에 추가하기

• appendChild() 메서드는 하나 또는 여러 노드를 메서드가 호출된 노드의 자식 노드 끝에 삽입할 수 있게 해준다.
• insertBefore()은 자식 노드 목록 끝 외에 삽입 위치를 조정하는것이 필요할 때 사용.

 

* appendChild()

<p>Hi</p>

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

var elementNode = document.createElement('strong'); // [#]
var textNode = document.createTextNode(' Dude');

//앞 노드들을 DOM에 추가.
document.querySelector('p').appendChild(elementNode);   // [1]
document.querySelector('strong').appendChild(textNode); // [2]

console.log(document.body.innerHTML); // [*]


설명
[#] 임시 element 노드와 text 노드 생성.

[1] p요소에 appenChild(elementNode)를 해준다.
	현재 상태 - <p> Hi <strong></strong> </p>

[2] 이번엔 strong요소에 appendChild(textNode)를 해준다.
	현재 상태 - <strong> Dude</stron>
    

[*] <p>Hi<strong> Dude</strong></p> 출력된다.
    

 

 

* insertBefore()

• insertBefore() 메서드는 2개의 매개변수를 필요로 함.
• 삽입될 노드와 해당 노드를 삽입하고자 하는 문서 내의 참조 노드.
• ※ 두번째 매개변수를 전달하지 않으면, appendChild() 처럼 동작함.

<ul>
  <li>2</li>
  <li>3</li>
</ul>

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

var text1 = document.createTextNode('1');  // [#]
var li = document.createElement('li');

li.appendChild(text1);  // [1]


var ul = document.querySelector('ul');  // [2]
ul.insertBefore(li, ul.firstChild); // [3]

console.log(document.body.innerHTML); [*]



[#] 텍스트 노드와 li element 노드를 생성.

[1] li에 text1을 추가.

[2] 문서에서 ul 선택.

[3] 앞에서 생성한 li element를 DOM에 추가.
	<ul>에 대해 ul.firstChild를 호출해서 <li>2</li>에 대한 참조 전달.
    
[*] <li>1</li>가 추가 되어있음.

--------------------------------------------------------------------
[3] 기본 문법

	var insertedNode = parentNode.insertBefore(newNode, referenceNode)      
	즉, ul에 insertBefore(li를 추가, ul.firstChild를 참조);

※ referenceNode 가 null 이라면, newNode 가 자식 노드의 리스트의 끝에 삽입됨.