[JS] 원하는 위치에 노드를 삽입하는 함수(insertAdjacentElement)

 

 

 

 

 

insertAdjacentElement()은 Element Node 또는 Text Node안에 원하는 Node를 삽입할 때 유용한 함수이다.

 

 

1. insertAdjacentElement()

element.insertAdjacentElement(position, element);

 

position 의 매개변수에 사용할 수 있는 값은 아래와 같다.

 

- beforebegin : 타겟 Element Node 바로 앞

- afterbegin : 타겟 Element Node의 첫 번째 Text Node 앞

- beforeend : 타겟 Element Node의 마지막 Text Node 뒤

- afterend : 타겟 Element Node 바로 뒤

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

 

두번째 매개변수인 element는 트리에 삽입할 요소이다.

 

 

 

2. 사용 예시

beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('beforebegin', tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('afterend', tempDiv);
  }
  setListener(tempDiv);
});

 

 

 

 

#참고사이트

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement