JavaScript로 HTML을 생성하는 3가지 쉬운 방법

오늘 포스트에서는 JavaScript를 사용하여 HTML을 생성하기 위해 제가 가장 좋아하는 3가지 기술을 안내해 드리겠습니다.

비디오 자습서

원하는 경우 이 튜토리얼을 비디오 형식으로 사용할 수 있습니다 👇

1. HTML 요소 객체 구축

힘차게 출발해보겠습니다. 이 기술에는 document.createElement(...)를 사용하여 DOM 요소를 만든 다음 해당 요소를 문서에 추가하는 작업이 포함됩니다.

이 방법은 약간 번거롭게 보일 수 있지만 가장 유연하게 사용할 수 있습니다. 즉, DOM 객체에 즉시 액세스할 수 있고 이벤트 리스너 연결, 속성 업데이트 또는 텍스트 삽입과 같은 작업을 수행할 수 있습니다.

기존 HTML

<ul id="fruit">
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ul>

다른 목록 항목인 포도를 추가해 보겠습니다.

const fruitsList = document.querySelector("#fruits");
const grapesListItem = document.createElement("li");

// add classes
grapesListItem.classList.add("list-item");

// add attributes
grapesListItem.setAttribute("id", "grapes");

// add events
grapesListItem.addEventListener("click", () => {
    alert("You clicked on Grapes!");
});

fruitsList.appendChild(grapesListItem);

보시다시피 프로그래밍 방식이지만 가장 유연합니다.

2. 내부 HTML

이전에 JavaScript를 사용해 본 적이 있다면 아마도 innerHTML 속성에 대해 알고 있을 것입니다. 이를 통해 요소 내에서 HTML을 다시 할당할 수 있습니다.

이번에는 innerHTML 를 사용하여 위에서 Grape 항목을 다시 추가해 보겠습니다.

const fruitsList = document.querySelector("#fruits");

fruitsList.innerHTML += '<li id="grapes">Grapes</li>';

const grapesListItem = document.getElementById("grapes");

grapesListItem.classList.add( ...);
grapesListItem.setAttribute( ... );
grapesListItem.addEventListener( ... );

보시다시피 +=를 사용하여 기존 HTML에 추가했습니다. 요소의 전체 HTML을 바꾸려면 대신 =를 사용하십시오.

주목해야 할 또 다른 사항은 innerHTML가 간단한 작업에 적합하다는 것입니다. 속성을 안전하게 추가하기 위해 목록 항목이 추가되면 getElementById()를 사용해야 했습니다.

3. insertAdjacentHTML

이것은 내가 가장 좋아하는 것 중 하나입니다. insertAdjacentHTML 메서드는 HTML 문자열을 삽입할 수 있다는 점에서 innerHTML와 유사한 방식으로 작동합니다.

그러나 insertAdjacentHTML 를 사용하면 위치를 지정할 수 있습니다. 다음 4가지 옵션 중 하나를 사용할 수 있습니다.

beforebegin (요소 앞)

afterbegin (첫째 아이)

beforeend (막내)

afterend (요소 뒤)

이번에는 insertAdjacentHTML를 사용하여 위와 동일한 예를 살펴보겠습니다.

const fruitsList = document.querySelector("#fruits");

fruitsList.insertAdjacentHTML("beforeend", '<li id="grapes">Grapes</li>');

const grapesListItem = document.getElementById("grapes");

grapesListItem.classList.add( ...);
grapesListItem.setAttribute( ... );
grapesListItem.addEventListener( ... );

이것은 추가된 요소를 선택해야 하지만 HTML 문자열의 위치 지정 측면에서 더 큰 유연성을 제공합니다.

이 방법에 대한 자세한 내용은 MDN Docs 을 참조하십시오.

지금 등록하세요 👉 JavaScript DOM 단기집중과정

웹 개발을 배우고 있다면 아래 링크에서 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1