[코딩애플,mdn] js로 html 생성하는 법 (appendChild, createElement, insertAdjacentHTML 등)

1. document.createElement() / appendChild() / clondeNode() / importNode()

<div id="test">
  <!-- 안녕 -->
</div>

<script>
  var a = document.createElement('p');
  a.innerHTML = '안녕';
  document.querySelector('#test').appendChild(a);
</script>

• document.createElement() : html 자료를 생성한다.
• element.appendChild() : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. (한 노드는 문서상의 두 지점에 동시에 존재할 수 없으므로, 노드가 이미 부모가 있다면 삭제되고 새로운 위치로 이동한다.)
  * append()와의 차이점 : append는 jquery에서 지원하는 메소드로, 원시 자바스크립트인 appendChild()와 다르다. 또한 append는 .append(`<p>내용</p>`) 처럼 요소를 바로 때려박을 수 있는 반면, appendChild()는 createElement로 반드시 요소를 따로 생성해야만 한다.
• cloneNode() : 위 appendChild와 다르게 새로운 부모의 밑으로 붙기 전에 노드를 복제한다. (이 메소드로 만들어진 노드들은 자동적으로 문서에 적용되지 않는다.)
• importNode() : appendChild()는 다른 문서로 노드를 이동시키지 못하므로, 다른 문서로 이동시키고 싶다면 이 메소드를 사용한다.

---

2. 변수에 html 저장 / insertAdjacentHTML()

<div id="test">
  <!-- 안녕 -->
</div>

<script>
  var a = '<p>안녕</p>';
  document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>

• 변수 안에 html을 저장할 수 있다.

---

element.insertAdjacentHTML(position, text)

html 특정 텍스트를 파싱하고, 특정 위치 DOM tree 안에 원하는 node들을 추가한다. 이미 사용중인 element는 다시 파싱하지 않는다. (= element 안에 존재하는 element를 건드리지 않는다) 그래서 innerHTML과 다르다. (innerHTML 보다 작업이 덜 드므로 더 빠름.)

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

position

• 'beforebegin' : element 앞에 붙는다
• 'afterbegin' : element 안에 가장 첫번째 child
• 'beforeend' : element 안에 가장 마지막 child
• 'afterend' : element 뒤에 붙는다

---

출처 : 코딩애플 https://codingapple.com/ / MDN https://developer.mozilla.org/ko/