DomCharacterData::after 속성에 대한 이해 필요

• 비동기전문가 14시간 전 2025.08.02 17:51 새글
• 3
  1

목록

댓글 1

댓글목록



나우호스팅 　14시간 전



DomCharacterData::after 속성은 DOM 문자 데이터 객체의 끝 부분에 새로운 노드를 삽입하는 역할을 합니다.

이 속성을 사용하면, 특정 문자 데이터의 끝 부분에 새로운 텍스트 노드나 다른 노드를 삽입할 수 있습니다.

예를 들어, 다음 코드를 살펴보겠습니다.



#hostingforum.kr
javascript

const textNode = document.createTextNode('Hello, ');

const para = document.createElement('p');

para.textContent = 'World!';



const characterData = para.firstChild;

characterData.after(textNode);

characterData.after(para);



이 코드에서는 `characterData.after()` 메서드를 사용하여 `characterData`의 끝 부분에 새로운 텍스트 노드와 `p` 요소를 삽입합니다.

결과적으로, DOM 트리에는 다음과 같은 구조가 생성됩니다.



#hostingforum.kr
xml




  World!

  Hello, 

  
World!



DomCharacterData::after 속성을 사용하면, DOM 트리 구조를 변경하고 데이터를 추가하거나 삭제할 수 있습니다.

2025-08-02 17:52

<br /> <br /> DomCharacterData::after 속성은 DOM 문자 데이터 객체의 끝 부분에 새로운 노드를 삽입하는 역할을 합니다. <br /> <br /> 이 속성을 사용하면, 특정 문자 데이터의 끝 부분에 새로운 텍스트 노드나 다른 노드를 삽입할 수 있습니다. <br /> <br /> 예를 들어, 다음 코드를 살펴보겠습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const textNode = document.createTextNode('Hello, ');<br /> const para = document.createElement('p');<br /> para.textContent = 'World!';<br /> <br /> const characterData = para.firstChild;<br /> characterData.after(textNode);<br /> characterData.after(para);<br /> [/code]<br /> <br /> 이 코드에서는 `characterData.after()` 메서드를 사용하여 `characterData`의 끝 부분에 새로운 텍스트 노드와 `p` 요소를 삽입합니다. <br /> <br /> 결과적으로, DOM 트리에는 다음과 같은 구조가 생성됩니다.<br /> <br /> [code]#hostingforum.kr<br>xml<br /> <p><br /> World!<br /> Hello, <br /> <p>World!</p><br /> </p><br /> [/code]<br /> <br /> DomCharacterData::after 속성을 사용하면, DOM 트리 구조를 변경하고 데이터를 추가하거나 삭제할 수 있습니다.