14.5 노드 생성/삽입/삭제하기👊
14.5.1 노드 생성하기
새로운 요소 노드 객체 생성 createElement
var element = document.createElement(요소의 이름);예를 들어 h1요소 객체를 만들 때는 이렇게 사용한다.
var headline = document.createElement("h1");
// 위 코드의 headline에 설정된 프로퍼티 값은 다음과 같다.
console.log(headline.nodeName); // "H1"
console.log(headline.nodeType); // "1"그러나 DOM 트리의 계층 구조를 뜻하는 프로퍼티(parentNode, childNode 등) 값은 모두 null이다. 즉, createElement로 생성한 노드 객체는 메모리에 생성되어 있을 뿐 문서의 DOM 트리와는 관계가 없다.
14.5.2 노드 삽입하기
위 처럼 노드 객체를 만들었으므로 DOM트리에 삽입해 보자. appendChild와 insertBefore 메서드를 사용한다.
요소의 마지막에 삽입하기 : appendChild
요소 노드.appendChild(삽입할 노드)
appendChild 메서드로 노드 객체를 삽입하면 그 객체가 DOM트리에 추가되고 각 노드에 계층 구조를 정의하는 프로퍼티가 바뀐다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="doglist">
<li>포메라니안</li>
<li>달마시안</li>
</ul>
</body>
</html>이 문서에 ul 마지막 자식 요소로 <li>불독</li>을 삽입하려면 다음과 같은 코드를 작성한다.
let doglist = document.getElementById("doglist");
let element = document.createElement("li");
let text = document.createTextNode("불독");
doglist.appendChild(element);
element.appendChild(text);지정한 자식 노드의 바로 앞에 삽입 : insertBefore
요소 노드.insertBefore(삽입할 노드, 자식 노드)
앞에서 예로 들었던 HTML문서의 두번째 자식 요소앞에 <li>불독</li>를 삽입하려면 다음과 같은 코드를 작성한다.
let doglist = document.getElementById("doglist");
let element = document.createElement("li");
let text = document.createTextNode("불독");
// 자식 노드 바로 앞에(before) 삽입
doglist.insertBefore(element, doglist.children[1]);
element.appendChild(text);HTML 요소를 생성하는 편리한 함수
- 요소 이름
- 속성 이름과 속성 값
- 자식 노드 목록
14.5.3 노드 삭제하기
노드.removeChild(자식노드)
삭제할 수 있는 노드가 해당 노드의 자식 노드. 즉, 삭제하려는 노드의 부모 노드 객체에서 removeChild 메서드를 호출한다.
node.parantNode.removeChild(node);14.5.4 노드 치환하기
노드.replaceChild(새로운 노드, 자식 노드)
치환하려는 노드의 부모 노드에서 replaceChild 메서드를 호출한다.
node.parantNode.replaceChild(newnode, node);