[JS] DOM의 Node 생성, 삽입, 삭제

Node 생성하기

메서드	설명
Document.createElement(tagName)	지정한 tagName의 HTML 요소를 만들어 반환한다.
Document.createTextNode(data);	- 새 텍스트 노드를 만든다. - 문자열은 이스케이프 처리된다.

*생성한 Node를 다른 곳으로 옮길 때, 기존에 있던 Node를 지울 필요가 없다.

 모든 Node 삽입 메서드는 자동으로 기존에 있던 Node를 삭제하고, 새로운 곳으로 Node를 옮기기 때문이다.

 

*이스케이브 처리가 된다?

 사용한 문자열이 HTML이 아닌 문자열로 처리 돼, 태그처리가 안되는 것

document.body.textContent = '<p>textContent</p>'; // 문자열 그대로 출력 ---- 이스케이프 처리 됨
document.body.innerHTML = '<p>innerHTML</p>'; // 태그화 돼서 출력--------- 이스케이프 처리 안됨 

---

Node 삽입하기 1

메서드	설명
ChildNode.before(Node or DOMString)	선택한 요소의 앞에 삽입
ParentNode.prepend(Node or DOMString)	선택한 요소의 첫번째 자식으로 삽입
ParentNode.append(Node or DOMString)	선택한 요소의 마지막 자식으로 삽입
ChildNode.after(Node or DOMString)	선택한 요소의 뒤에 삽입
ChildNode.replaceWith(Node or DOMString)	선택한 요소를 삭제하고 삽입

*여러 개의 요소를 한꺼번에 넣을 수 있다.

*주의: 문자열을 사용할 때 HTML이 아닌 문자열 형태로 삽입된다. (elem.textContent를 사용한 것처럼)

Node 삽입하기 2

메서드	설명
Element.insertAdjacentHTML(position, text)	- document.createElement를 사용해 별도의 요소를 만들어   줄 필요가 없다. - text는 HTML형태로 삽입
Element.insertAdjacentElement(position, element)	- document.createElement로 요소를 만들어줘야 한다. - text는 HTML형태로 삽입
Element.insertAdjacentElement(position, element)	- text는 문자열 형태로 삽입
공통 설명	[position] - beforebegin: 선택한 요소의 앞에 삽입 - afterbegin: 선택한 요소의 첫번째 자식으로 삽입 - beforeend: 선택한 요소의 마지막 자식으로 삽입 - afterend: 선택한 요소의 뒤에 삽입

*한번에 하나의 요소를 넣을 수 있다.

---

Node 삭제하기

메서드	설명
ChildNode.remove()	선택한 요소를 삭제

---

[Node 생성 예제]

See the Pen [JS] Node 생성하기 by mill (@millfeel) on CodePen.

 

[Node 삽입 예제 1]

See the Pen [JS] Node 삽입하기 by mill (@millfeel) on CodePen.

 

[Node 삽입 예제 2]

See the Pen [JS] Node 삽입하기 2 by mill (@millfeel) on CodePen.

 

[Node 삭제 예제]

See the Pen [JS] Node 삭제하기 by mill (@millfeel) on CodePen.

---

[공부 좌표]

문서 수정하기

Document.createElement()

Document.createTextNode()

ChildNode.before()

ParentNode.prepend()

ParentNode.append()

ChildNode.after()

ChildNode.replaceWith()

Element.insertAdjacentHTML()

Element.insertAdjacentElement()

Element.insertAdjacentText()

ChildNode.remove()