[JS ] - DOM 객체 다루기 - element.insertAdjacentElement() append() 보다 빠르다~!

element.insertAdjacentElement()

- 특정엘리멘트에 노드를 삽입하는 메소드 이다.

 

- Syntax(구문)

insertAdjacentElement(position, element)

 

- Parameters(파라미터) - position

타겟요소의 상대적인 위치를 문자열로 지정한다. 반드시 텍스트가 일치해야하며 대소문자를 구분하지는 않는다.

A string representing the position relative to the targetElement; 

must match (case-insensitively) one of the following strings:

Parameters(String type)	Description
'beforebegin'	Before the targetElement itself	타겟요소의 앞
'afterbegin'	Just inside the targetElement,  before its first child	타겟요소의 첫번째 자식요소로 배치한다.
'beforeend'	Just inside the targetElement, after its last child.	타겟요소의 마지막 자식요소로 배치한다.
'afterend'	After the targetElement itself.	타겟요소의 뒤

 

예시) 아래와 같은 html markup 에서의 parameter별 위치

 

<!-- 기본코드 -->
<div class="target">
  <p>child</p>
</div>


<!-- 파라미터 포지션 결과위치 -->

<!-- beforebigin -->
<div class="target">
  <!-- afterbegin -->
    <p>child</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

 

- Parameters(파라미터) - element

DOM tree에 삽입될 요소이다.

The element to be inserted into the tree.

 

- Return value(반환값)

삽입된 요소를 반환하며, 삽입될 요소가 없을 경우(실패할경우)에는 null이 반환된다. 

The element that was inserted, or null, if the insertion failed.

 

 

 

[ Tips & Issue ]

insertAdjacentHTML 이 처리속도가 더 빠르지만, 노드를 클론해서 넣을때나 이럴때에 요소가 제대로 표시되지 않고

[Object element..]뭐 요로코롬 뜬다면... insertAdjacentElement를 사용하도록 하자구~!!

 

[ 관련 사이트 소개 ]

- innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

[처리속도비교해 놓은 페이지 링크 ]  

Run results for: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement - MeasureThat.net

 

 

[ Reference of MDN ]

Element: insertAdjacentElement() method - Web APIs | MDN

 

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

Element: insertAdjacentHTML() method - Web APIs | MDN

 

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

Element: insertAdjacentText() method - Web APIs | MDN