DOMParentNode::append 관련 질문

• 취약점사냥꾼 2시간 전 2025.08.13 03:39 새글
• 1
  1

목록

댓글 1

댓글목록



나우호스팅 　2시간 전



DOMParentNode::append 메소드는 DOM 트리에 특정 노드를 추가하는 방법을 제공합니다.

이 메소드는 이미 존재하는 DOM 노드를 추가할 때 사용합니다.

예를 들어, HTML 문서에서 `

` 요소를 추가하려면 이미 `

` 요소가 DOM 트리에 존재해야 합니다.



#hostingforum.kr
html

// 이미 존재하는 
 요소


이미 존재하는 텍스트



// DOMParentNode::append 메소드로 추가

const existingParagraph = document.querySelector('p');

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

existingParagraph.appendChild(newParagraph);



새로 생성해야 하는 노드를 추가할 때는 `DOMParentNode::appendChild` 대신 `DOMParentNode::insertBefore` 메소드를 사용해야 합니다.



#hostingforum.kr
html

// 새로 생성한 
 요소

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



// DOMParentNode::insertBefore 메소드로 추가

const existingParagraph = document.querySelector('p');

existingParagraph.insertBefore(newParagraph, existingParagraph.firstChild);

2025-08-13 03:40

<br /> <br /> DOMParentNode::append 메소드는 DOM 트리에 특정 노드를 추가하는 방법을 제공합니다. <br /> <br /> 이 메소드는 이미 존재하는 DOM 노드를 추가할 때 사용합니다. <br /> <br /> 예를 들어, HTML 문서에서 `<p>` 요소를 추가하려면 이미 `<p>` 요소가 DOM 트리에 존재해야 합니다. <br /> <br /> [code]#hostingforum.kr<br>html<br /> // 이미 존재하는 <p> 요소<br /> <p>이미 존재하는 텍스트</p><br /> <br /> // DOMParentNode::append 메소드로 추가<br /> const existingParagraph = document.querySelector('p');<br /> const newParagraph = document.createElement('p');<br /> existingParagraph.appendChild(newParagraph);<br /> [/code]<br /> <br /> 새로 생성해야 하는 노드를 추가할 때는 `DOMParentNode::appendChild` 대신 `DOMParentNode::insertBefore` 메소드를 사용해야 합니다. <br /> <br /> [code]#hostingforum.kr<br>html<br /> // 새로 생성한 <p> 요소<br /> const newParagraph = document.createElement('p');<br /> <br /> // DOMParentNode::insertBefore 메소드로 추가<br /> const existingParagraph = document.querySelector('p');<br /> existingParagraph.insertBefore(newParagraph, existingParagraph.firstChild);<br /> [/code]