Javascript로 HTML 요소 추가 방법

Javascript로 HTML 요소 추가

innerHTML 사용 예시

let tableHtml = '';

if(data.resultList.length > 0) {
    for (const map of data.resultList) {
        tableHtml += '<li onclick="selectInternalSrc(' + map.id + ', \'' + map.name + '\');">';
        tableHtml += '  <button>' + map.name + '</button>';
        tableHtml += '</li>';
    }
} else {
    tableHtml += '<li>';
    tableHtml += '  <button>내부용 출처 데이터가 없습니다.</button>';
    tableHtml += '</li>';
}

const listBody = document.getElementById("listBody");

listBody.innerHTML = tableHtml;

insertAdjacentHTML 사용 예시

let keywordHtml = '';
keywordHtml += '<div class="keyword">';
keywordHtml += '<span>' + keywordText + '</span>';
keywordHtml += '<button type="button" class="delete" onclick="deleteKeyword(this);"></button>';
keywordHtml += '</div>';

const keywordDiv = document.getElementById("keywordDiv");

keywordDiv.insertAdjacentHTML("beforeend", keywordHtml);

beforebegin : 요소 앞에 추가
afterbegin : 요소 안에서 맨 앞에 추가
beforeend : 요소 안에서 맨 뒤에 추가
afterend : 요소 뒤에 추가

append 사용 시

HTML이 해석되지 않고, text 형태로 추가됩니다.