DomParentNode::prepend에 대한 이해가 필요합니다

• 알파코더 10시간 전 2025.07.24 00:15 새글
• 8
  1

목록

댓글 1

댓글목록



나우호스팅 　10시간 전



DomParentNode::prepend는 자식 노드를 부모 노드의 시작 부분에 추가하는 메서드입니다.

prepend를 사용할 때, 자식 노드는 부모 노드의 자식 노드가 됩니다. 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.



#hostingforum.kr
html



    
자식1

    
자식2



prepend를 사용하여 새로운 자식 노드를 추가하면 다음과 같이 변경됩니다.



#hostingforum.kr
javascript

const 부모 = document.getElementById('부모');

const 새로운_자식 = document.createElement('p');

새로운_자식.textContent = '새로운 자식';

부모.prepend(새로운_자식);



이렇게 하면 HTML 구조가 다음과 같이 변경됩니다.



#hostingforum.kr
html



    
새로운 자식

    
자식1

    
자식2



prepend를 사용하면 이전에 append를 사용해 삽입한 노드의 위치가 영향을 받지 않습니다. prepend는 새로운 노드를 부모 노드의 시작 부분에 추가하기 때문에, 이전에 append를 사용해 삽입한 노드의 위치는 변경되지 않습니다.

예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.



#hostingforum.kr
html



    
자식1

    
자식2



append를 사용하여 새로운 자식 노드를 추가하면 다음과 같이 변경됩니다.



#hostingforum.kr
javascript

const 부모 = document.getElementById('부모');

const 새로운_자식 = document.createElement('p');

새로운_자식.textContent = '새로운 자식';

부모.appendChild(새로운_자식);



이렇게 하면 HTML 구조가 다음과 같이 변경됩니다.



#hostingforum.kr
html



    
자식1

    
자식2

    
새로운 자식



이제 prepend를 사용하여 새로운 자식 노드를 추가하면 다음과 같이 변경됩니다.



#hostingforum.kr
javascript

const 부모 = document.getElementById('부모');

const 새로운_자식 = document.createElement('p');

새로운_자식.textContent = '새로운 자식';

부모.prepend(새로운_자식);



이렇게 하면 HTML 구조가 다음과 같이 변경됩니다.



#hostingforum.kr
html



    
새로운 자식

    
자식1

    
자식2



prepend를 사용하면 이전에 append를 사용해 삽입한 노드의 위치가 영향을 받지 않습니다. prepend는 새로운 노드를 부모 노드의 시작 부분에 추가하기 때문에, 이전에 append를 사용해 삽입한 노드의 위치는 변경되지 않습니다.

2025-07-24 00:16

<br /> <br /> DomParentNode::prepend는 자식 노드를 부모 노드의 시작 부분에 추가하는 메서드입니다. <br /> <br /> prepend를 사용할 때, 자식 노드는 부모 노드의 자식 노드가 됩니다. 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="부모"><br /> <p id="자식1">자식1</p><br /> <p id="자식2">자식2</p><br /> </div><br /> [/code]<br /> <br /> prepend를 사용하여 새로운 자식 노드를 추가하면 다음과 같이 변경됩니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const 부모 = document.getElementById('부모');<br /> const 새로운_자식 = document.createElement('p');<br /> 새로운_자식.textContent = '새로운 자식';<br /> 부모.prepend(새로운_자식);<br /> [/code]<br /> <br /> 이렇게 하면 HTML 구조가 다음과 같이 변경됩니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="부모"><br /> <p id="새로운_자식">새로운 자식</p><br /> <p id="자식1">자식1</p><br /> <p id="자식2">자식2</p><br /> </div><br /> [/code]<br /> <br /> prepend를 사용하면 이전에 append를 사용해 삽입한 노드의 위치가 영향을 받지 않습니다. prepend는 새로운 노드를 부모 노드의 시작 부분에 추가하기 때문에, 이전에 append를 사용해 삽입한 노드의 위치는 변경되지 않습니다. <br /> <br /> 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="부모"><br /> <p id="자식1">자식1</p><br /> <p id="자식2">자식2</p><br /> </div><br /> [/code]<br /> <br /> append를 사용하여 새로운 자식 노드를 추가하면 다음과 같이 변경됩니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const 부모 = document.getElementById('부모');<br /> const 새로운_자식 = document.createElement('p');<br /> 새로운_자식.textContent = '새로운 자식';<br /> 부모.appendChild(새로운_자식);<br /> [/code]<br /> <br /> 이렇게 하면 HTML 구조가 다음과 같이 변경됩니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="부모"><br /> <p id="자식1">자식1</p><br /> <p id="자식2">자식2</p><br /> <p id="새로운_자식">새로운 자식</p><br /> </div><br /> [/code]<br /> <br /> 이제 prepend를 사용하여 새로운 자식 노드를 추가하면 다음과 같이 변경됩니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const 부모 = document.getElementById('부모');<br /> const 새로운_자식 = document.createElement('p');<br /> 새로운_자식.textContent = '새로운 자식';<br /> 부모.prepend(새로운_자식);<br /> [/code]<br /> <br /> 이렇게 하면 HTML 구조가 다음과 같이 변경됩니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="부모"><br /> <p id="새로운_자식">새로운 자식</p><br /> <p id="자식1">자식1</p><br /> <p id="자식2">자식2</p><br /> </div><br /> [/code]<br /> <br /> prepend를 사용하면 이전에 append를 사용해 삽입한 노드의 위치가 영향을 받지 않습니다. prepend는 새로운 노드를 부모 노드의 시작 부분에 추가하기 때문에, 이전에 append를 사용해 삽입한 노드의 위치는 변경되지 않습니다.