DOM에서 노드 추가, 삭제하기

노드리스트(node list): querySelectorAll()메서드를 사용해 가져온 여러개의 노드 정보를 저장한 것

 

1. 텍스트 노드를 사용하는 새로운 요소 추가하기

(1) 요소 노드 만들기 - createElement() 메서드

 

document.createElement(노드명);

 

ex) var newP = document.createElement("p");

 

 

 

(2) 텍스트 노드 만들기 - createTextNode() 메서드

 

document.createTextNode(텍스트);

 

ex) var txtNode = document.createTextNode("텍스트 노드를 만들었다!");

 

 

 

(3) 자식 노드 연결하기 - appendChild()

→ newP와 txtNode 연결하기

→ 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용

→ 자식 노드 중 맨 끝에 추가

 

부모노드.appendChild(자식노드)

 

newP.appendChild(txtNode);

document.getElementById("info").appendChild(newP);

 

 

 

✅ 전체 코드

 

function addP(){
	var newP = document.createElement("p");
    var txtNode = document.createTextNode("이것이 새로운 노드다!");
    
    newP.appendChild(txtNode);
    document.getElementBtyId("info").appendChild(newP);
}

 

 

 

2. 속성값이 있는 새로운 요소 추가하기

(1) 요소 노드 만들기 - createElement() 메서드

 

document.createElement(노드명);

 

ex) var newImg = document.createElement("img");

 

 

 

 

(2) 속성 노드 만들기 - createAttribute() 메서드

 

document.createAttribute(속성명);

 

ex) var srcNode = document.createAttribute("src");

srcNode.value = "images/dom.jpg";

 

 

 

 

(3) 속성 노드 연결하기 - setAttributeNode()

 

요소명.setAttributeNode(속성노드)

ex) newImg.setAttributeNode(srcNode);

 

 

 

 

(4) 자식 노드 연결하기 - appendChild()

 

부모노드.appendChild(자식노드)

 

document.getElementById("info").appendChild(newImg);