JavaScript DOM에서 한 번에 여러 요소를 추가하는 방법

오늘 게시물에서는 JavaScript DOM을 사용하여 여러 자식 요소를 부모 요소에 추가하는 가장 좋아하는 두 가지 방법을 안내합니다.

1. insertAdjacentHTML()

이것은 JavaScript에서 가장 과소평가된 방법 중 하나입니다. insertAdjacentHTML()를 사용하여 상위 요소에 상대적인 지정된 위치에 HTML 문자열을 삽입할 수 있습니다.

총 4개의 위치를 ​​지원하지만 요소 추가에 관심이 있는 위치는 beforeend입니다(부모 요소의 끝 전에 삽입).

실제로 그것을 보자.

/*
    HTML:

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

const fruitList = document.getElementById("fruit");

// Add 3 new <li>'s to the list of fruits
fruitList.insertAdjacentHTML("beforeend", `
    <li>Pear</li>
    <li>Orange</li>
    <li>Grape</li>
`);

보시다시피 일반 HTML을 사용하여 여러 요소를 쉽게 추가할 수 있습니다. 더 간단하게 만들려면 위에서 한 것처럼 템플릿 리터럴을 사용하여 여러 줄 HTML을 활용할 수 있습니다 👆

2. 추가()

위의 기술은 HTML 문자열을 사용하지만 DOM 요소를 수동으로 빌드하려면 어떻게 해야 할까요? 경우에 따라 이렇게 하면 이벤트 리스너를 추가하거나 요소에 대한 작업을 쉽게 수행할 수 있습니다.

이번에는 append()와 같이 작동하지만 여러 항목을 전달할 수 있는 appendChild() 메서드를 사용하여 위와 동일한 예를 살펴보겠습니다.

/*
    HTML:

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

const fruitList = document.getElementById("fruit");

const pearListItem = document.createElement("li");
const orangeListItem = document.createElement("li");
const grapeListItem = document.createElement("li");

pearListItem.textContent = "Pear";
orangeListItem.textContent = "Orange";
grapeListItem.textContent = "Grape";

// Add 3 new <li>'s to the list of fruits
fruitList.append(pearListItem, orangeListItem, grapeListItem);

또한 append() 메서드를 사용하면 텍스트 노드나 일반 텍스트 문자열을 전달할 수도 있습니다.

다른 기술이 있다면 아래에 남겨주세요!

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

아래 링크에서 이 게시물에서 다루는 주제 중 일부를 다루는 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다. 👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1



행복한 코딩 😎