Javascript로 DOM 화면을 렌더링하기 위해 관련 메서드를 찾다가 유사하면서도 다른 여러 메서드들을 알게 됐다. Element.innerHTML, Element.insertAdjacentHTML, Node.appendChild 등 관련 메서드가 있는데, 메서드를 살펴보기 전에 Element와 Node가 무엇인지부터 체크하자.
EventTarget.addEventListener()
, EventTarget.removeEventListener()
, EventTarget.dispatchEvent()
등이 있다.Node.childNodes
, Node.parentNode
, Node.firstChild
, Node.lastChild
, Node.nextSibling
, Node.previousSibling
, Node.textContent
이 있다.Node.appendChild()
, Node.cloneNode()
, Node.hasChildNodes()
, Node.insertBefore()
, Node.removeChild()
, Node.replaceChild()
참고로 DOM(문서 개체 모델, Document Object Model)은 자바스크립트 Node 개체의 계층화된 트리다.
<body>
, <a>
, <p>
등과 같은 노드 참고로 Element 노드는 아니지만 Node 중에
window.document
등과 같은 Document 노드, 줄바꿈과 공백을 포함한 텍스트인 Text 노드,class="cool"
과 같은 Attribute 노드 등도 있다)
Element.classList
, Element.id
Element.innerHTML
, Element.outerHTML
등이 있다.EventTarget.addEventListener()
, Element.insertAdjacentElement()
, Element.insertAdjacentHTML()
, Element.querySelector()
, Element.remove()
등이 있다.const content = element.innerHTML;
element.innerHTML = htmlString;
DOMString
이다.
- 지정한 값은 HTML 또는 XML(문서 타입에 따라)로 파싱되어, DocumentFragment 객체가 새 요소에 대한 새로운 노드 DOM 노드 집합을 나타냅니다.
- 내용이 대체되는 요소가
<template>
요소 인 경우,<template>
요소의 content (en-US) 속성(attribute)은 1단계에서 작성한 새 DocumentFragment 로 대체됩니다.- 다른 모든 요소의 경우, 요소의 내용은 새 DocumentFragment 의 노드로 대체됩니다.
Node.textContent
를 사용하라고 MDN은 권장한다.Node.textContent
는 전달된 내용을 HTML로 파싱하지 않고 원시 텍스트(raw text)로 삽입하기 때문에 안전하다.element.insertAdjacentHTML(position, text);
// postion에는 beforebegin, afterbegin, beforeend, afterend가 있다.
// text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이다.
// position의 예시
<!-- [beforebegin] : element 앞에 -->
<p>
<!-- [afterbegin] : element 안에 가장 첫번째 child -->
foo
<!-- [beforeend] : element 안에 가장 마지막 child -->
</p>
<!-- [afterend] : element 뒤에 -->
appendChild() 메서드는 한 노드 개체를 DOM 트리인 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다.
만약 인자로 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 해당 노드를 현재 위치에서 새로운 위치로 이동시킨다.(만약 인자로 주어진 노드가 이미 부모를 가지고 있다면 우선 그곳에서 삭제되고 새로운 위치로 이동된다. 따라서 문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로부터 지워버릴 필요가 없다.)
[참고] 즉, 한 노드는 문서상의 두 지점에 동시에 존재할 수 없다.
appendChild()와 비슷한 메서드로서 Node.insertBefore()가 있다. Node.insertBefore(삽입될 노드, 삽입될 노드가 앞으로 올 참조 노드) 메서드는 두 번째 매개변수가 전달되지 않을 경우, appendChild()처럼 동작한다.
구문
element.appendChild(node);
// 인자로 넣을 node로는 document.createElement(tagName)로 새로 만들어서 사용하거나, 이미 문서에 존재하는 노드를 참조할 수도 있다.
Reference
https://developer.mozilla.org/
https://www.measurethat.net/Benchmarks/Show/16493/1/innerhtml-vs-insertadjacenthtml-vs-appendchild-vs-inser
마지막에 첨부하신 성능비교 스크린샷 부분이 이해되질 않아서 댓글 남깁니다.
각 명령어를 비교하는 기준이 "Executions per second" 인데,
그럼 "1초당 실행 횟수" 이니
해당 값이 큰 함수일 수록 더 빠른 함수인 것 아닌가요?
그리고 제가 구글링한 다른 자료와 "Executions per second" 값의 순서가 달라 해당 자료 첨부합니다!
https://www.measurethat.net/Benchmarks/Show/11738/0/insertadjacenthtml-vs-append
참고하고 갑니다. 정리 감사합니다!