DOM 조작

김기훈·2023년 3월 14일

목록 보기

15/17

노드 추가

1. insertAdjacentHTML() 메서드

DOM API의 메서드 중 하나로, 특정 요소의 콘텐츠를 수정할 때 사용된다. 이 메서드를 사용하면 특정 요소 앞이나 뒤에 새로운 HTML 콘텐츠를 추가할 수 있다. 이 메서드는 innerHTML 속성과 유사하지만, 요소의 내부 콘텐츠를 완전히 교체하지 않고도 요소의 특정 위치에 새로운 콘텐츠를 삽입할 수 있다.

insertAdjacentHTML() 메서드는 첫 번째 인수로 삽입할 위치를 지정하는 문자열 인수(position)와 두 번째 인수로 삽입할 HTML 콘텐츠를 포함하는 문자열 인수(html)를 받는다.

삽입할 위치를 지정하는 문자열 인수(position)

"beforebegin": 현재 요소의 앞에 HTML 콘텐츠를 삽입

"afterbegin": 현재 요소의 첫 번째 자식 요소 앞에 HTML 콘텐츠를 삽입

"beforeend": 현재 요소의 마지막 자식 요소 뒤에 HTML 콘텐츠를 삽입

"afterend": 현재 요소의 뒤에 HTML 콘텐츠를 삽입

아래의 insertAdjacentHTML() 메서드 사용 예시를 보자

// HTML 요소 가져오기
const container = document.querySelector('#container');

container.insertAdjacentHTML('beforebegin', '<div>요소 앞에 추가된 HTML</div>');

container.insertAdjacentHTML('afterbegin', '<p>첫 번째 자식 요소 앞에 추가된 HTML</p>');

container.insertAdjacentHTML('beforeend', '<p>마지막 자식 요소 뒤에 추가된 HTML</p>');

container.insertAdjacentHTML('afterend', '<div>요소 뒤에 추가된 HTML</div>');

<div>요소 앞에 추가된 HTML</div>
  <p id="container">
    <p>첫 번째 자식 요소 앞에 추가된 HTML</p>
    <p>원래 첫 번째 자식</p>
    <p>원래 마지막 자식</p>
    <p>마지막 자식 요소 뒤에 추가된 HTML</p>
  </p>
<div>요소 뒤에 추가된 HTML</div>

3. appendChild() 메서드

인수로 전달받은 노드를 자신을 호출한 노드의 마지막 자식 노드로 DOM에 추가한다.

3. insertBefore() 메서드

첫 번째 인수로 받은 노드를 두번째 인수로 전달받은 노드 앞에 삽입한다.

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
var sp1 = document.createElement("span");

var sp2 = document.getElementById("childElement");
var parentDiv = sp2.parentNode;

//parentDiv 내의 자식요소인 sp2 앞에 sp1을 삽입한다.
parentDiv.insertBefore(sp1, sp2);
</script>

두 번째 인수로 전달받은 노드는 반드시 insertBefore 메서드를 호출한 노드의 자식 노드여야 한다.

노드의 이동

DOM에 이미 존재하는 노드를 appendCild 또는 insertBefore 메서드를 사용하여 다시 추가하면 현재 위치에서 노드를 제거하고 새로운 위치에 노드를 추가한다. 즉, 노드가 이동한다.

노드의 복사

Node.cloneNode([deep:true|false]) 메서드는 노드의 사본을 생성하여 반환한다. deep 에 true를 인수로 전달하면 노드를 깊은 복사하여 모든 자손 노드가 포함된 사본을 생성하고, false를 인수로 전달하거나 생략하면 노드를 얕은 복사하여 노드 자신만의 사본을 생성한다. (텍스트 노드도 없다.)