DOM appendChild로 리스트에 요소 추가하기

📣HTML을 수정하지 않고 자바스크립트를 이용해서 요소를 추가하는 방법

 

 

새로운 요소를 추가하는 방법은 다음과 같다

 

1. createElement() - 새로운 노드를 만든다

2. createTextNode() - 새로운 텍스트 노드를 만든다

3. appendChild() - 노드1에 노드2를 append한다 

 

잠깐 의문점) 이렇게 텍스트 노드를 append하는 것과 innerHTML을 사용하는 것의 차이가 뭐지?

 

어쨌든,

위 1~3을 통해서 삽입할 새 노드를 만들었고, 이제 문서에서 원하는 위치를 찾아서 다시 append해주면 된다.

 

하나의 노드를 리턴하는 메소드에는 getElementId('id')와 querySelector('css selector')가 있는데 후자를 사용해서 리스트 노드에 접근했다.

 

예제) 도시 리스트에 다섯번째 요소인 NewYork을 JS로 추가함

 

 

 

번외

💡 innerHTML과 createElement의 차이점

 

1. createElement가 더 효율적이다

let div = document.querySelector('.container');
div.innerHTML += '<p>JS DOM</p>';

 

코드는 깔끔하게 보이지만...innerHTML은 웹 브라우저가 모든 DOM node들을 reparse하고 recreate하게 만들기 때문에 새로운 요소를 만들고 append하는 것보다 비효율적임. 

 

2. createElement가 더 안전하다

innerHTML은 내가 통제권을 쥐고 있지 않을 때 악성 코드가 섞일 위험이 있음

 

3. DocumentFragment를 사용해서 DOM에 노드를 추가하면 더 효율적이다

 

let div = document.querySelector('.container');

for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   div.appendChild(p);
}

 

이건 그냥 creatElement/appendChild를 사용해서 요소를 추가한 것.

마지막줄을 보면 매번 div에 append하고 있는데 이게 매우 비효율적이라고 함.

 

let div = document.querySelector('.container');

// compose DOM nodes
let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   fragment.appendChild(p);
}

// append the fragment to the DOM tree
div.appendChild(fragment);

 

fragment에 새로 만든 요소들을 붙여넣고 마지막에 한번에 div에 append하는 방식

document fragment는 active DOM tree에 링크하는 게 아니라 퍼포먼스에 영향을 안 준다고 함.

 

출처 )

JavaScript innerHTML vs createElement

 

fragment가 뭔지는 나도 잘 모르겠음. 아직 DOM에 대한 공부가 부족해서 오늘은 여기까지만 알아보려고 함. 혹시 잘 아시는 분들은 덧글로 도움을 주시면 감사할 것 같다.

 

📚 Reference

- Javascript and JQuery : Interactive Front-End Web Development by Jon Duckett