JSON 데이터로 HTML 내용 추가하기

자바스크립트로 HTML 페이지를 제어할 때 가장 많이 하는 작업중 하나를 꼽으면 HTML 페이지에 새로운 내용을 추가하는 것입니다.

원격 서버에서 추가할 데이터나 HTML 내용의 일부를 받을 수도 있고, 또는 템플릿만 있는 HTML 페이지에 JSON 데이터를 받아 페이지 레이아웃을 새롭게 만들 수 도 있습니다.

HTML 페이지에 내용을 추가하는 방법은 3가지가 있습니다.

JSON 데이터를 받아 JSON 객체를 생성한 것으로 간주하고, 미리 만들어져 있는 JSON 객체를 기초로 HTML 내용을 추가하는 방법을 알아보겠습니다.

HTML 코드 문자열을 innerHTML에 붙이기

<ul id="items" class="list"></ul>//JSON 객체 생성let json = JSON.parse('{"data": [{"name": "라이언", "age": 5},{"name": "어피치", "age": 4},{"name": "프로도", "age": 3}]}');let addHtml = "";//HTML 코드 생성json.data.forEach((item)=>{    addHtml += "<li data-age=\""+item.age+"\">"+item.name+"</li>";});// innerHTML 변경document.getElementById('items').innerHTML = addHtml;

태그 엘리먼트 노드로 붙이기

<ul id="items" class="list"></ul>
//JSON 객체 생성let json = JSON.parse('{"data": [{"name": "라이언", "age": 5},{"name": "어피치", "age": 4},{"name": "프로도", "age": 3}]}');let parent = document.querySelector('#items');
// 노드 추가 순환json.data.forEach((item)=>{    // li 노드 생성    let li = document.createElement(li);    li.textContent = item.name;    li.dataset.age = item.age;    // li 노드 추가    parent.append(li);});

문서 프레그먼트(Document Fragment)를 이용해 붙이기

<ul id="items" class="list"></ul>
//JSON 객체 생성let json = JSON.parse('{"data": [{"name": "라이언", "age": 5},{"name": "어피치", "age": 4},{"name": "프로도", "age": 3}]}');let parent = document.querySelector('#items');let fragment = document.createDocumentFragment();
// 노드 추가 순환json.data.forEach((item)=>{    // li 노드 생성    let li = document.createElement('li');    li.textContent = item.name;    li.dataset.age = item.age;    // li 노드 추가    fragment.append(li);});parent.append(fragment);

문서 프래그먼트 노드는 HTML 태그나 표현 요소로 사용되지 않는 빈 DOM 노드입니다.

프레그먼트 노드는 다른 노드(들)을 담는 용도로 사용합니다.

엘리먼트 노드를 생성해 하나씩 DOM 트리에 붙이는 것보다는 프레그먼트 노드에 엘리먼트 노드를 모아서 프레그먼트 노드를 DOM 트리에 한번 붙이는 방법이 화면 리프레시(재 렌더링) 가 한번만 있기 때문에 효율과 성능 측면에서 더 유리합니다.

성능적인 이슈가 없기 때문에 보다 깨끗한 코드를 생성할 수 있습니다.

예제는 코드가 짧아 생략되었지만, 노드 프레그먼트를 생성하는 함수와, 추가하는 함수를 분리할 수 있어, 코드 관리 측면에서도 조금 더 유리합니다.