자바스크립트 HTML DOM Elements (Nodes)

Nodes (HTML Elements)추가 및 제거


새 HTML 요소(Elements) (Nodes) 만들기

HTML DOM에 새 요소(element)를 추가하려면, 먼저 요소(element) (요소 노드(element node))를 만들어야 합니다. 그리고 기존 요소에 이것을 첨부(append)해야합니다.

Example

This is a paragraph.

This is another paragraph.

This is new.


예제 설명

이 코드는 새 <p> 요소(element)를 만듭니다:

<p> 요소에 텍스트를 추가하려면, 먼저 텍스트 노드(text node)를 만들어야 합니다. 이 코드는 텍스트 노드를 만듭니다:

그런 다음 <p> 요소에 텍스트 노드를 추가해야 합니다:

마지막으로 기존 요소에 새 요소를 추가해야 합니다.

이 코드는 기존 요소를 찾습니다:

이 코드는 기존 요소에 새 요소를 추가합니다:


새 HTML 요소(Elements) 만들기 – insertBefore()

앞의 예제에서 appendChild() 메소드는 부모의 마지막 자식으로 새 요소를 추가했습니다.

대신에 insertBefore() 메소드를 사용할 수 있습니다:

Example

This is new.

This is a paragraph.

This is another paragraph.


기존 HTML 요소(Elements) 제거

HTML 요소를 제거하려면, 그 요소의 부모를 알아야합니다:

Example

This is another paragraph.


예제 설명

이 HTML 문서에는 두 개의 자식 노드 (두 개의 <p> 요소)가 있는 <div> 요소가 있습니다:

id="div1"인 요소를 찾습니다:

id="p1"인 <p>요소를 찾습니다:

부모에서 자식을 삭제합니다:

일반적인 해결방법은 다음과 같습니다: 제거할 자식을 찾아, parentNode 속성을 사용하여 부모를 찾습니다:


HTML 요소(Elements) 바꾸기(Replacing)

요소를 HTML DOM으로 바꾸려면, replaceChild() 메소드를 사용합니다:

Example

This is new.

This is another paragraph.

출처: JavaScript HTML DOM Elements (Nodes)

댓글 남기기