꺾이지 않는 마음

여태 DOM을 활용하여 HTML 요소를 수정할 때마다 줄곧 innerHTML만 써왔는데, 최근에 innerAdjacentHTML라는 메서드도 알게 되어 정리해보았다. 1️⃣ innerHTML 우선 innerHTML은 대상 노드 안에 있는 모든 후손 요소까지 전부 렌더링 한다는 특징이 있다. 이는 변경점이 없는 대상까지도 전부 렌더링하여 불필요한 동작을 야기한다는 의미를 갖는다. 아래 예시를 보자, 나는 첫번째 자식 요소 노드 나는 두번째 자식 요소 노드 나는 세번째 자식 요소 노드 const div = document.querySelector('div'); console.log(div.innerHTML); /* 결과 나는 첫번째 자식 요소 노드 나는 두번째 자식 요소 노드 나는 세번째 자식 요소 노드 *..