JavaScript/DOM

[JavaScript]HTML 요소 추가하는 방법

DevStory 2022. 11. 21.

HTML 요소 추가하는 방법

지난 포스팅에서 HTML 요소를 생성하고 body 태그에 추가하는 예제를 보여줬습니다. 하지만, body 태그에 추가할 때 사용되었던 appendChild() 메서드에 대해서는 자세히 언급하지 않았습니다.

이번 포스팅은 새로운 HTML 요소를 appendChild() 메서드를 사용하여 DOM에 배치하는 방법에 대해 소개합니다.

지난 포스팅은 아래 포스팅에서 확인할 수 있습니다.

[JavaScript]HTML 요소 생성하는 방법

HTML 요소 생성하는 방법 이번 포스팅은 JavaScript에서 HTML 요소를 생성 후 DOM 트리에 추가하는 방법을 소개합니다. createElement() 메서드 가장 기본적인 방법은 document 객체의 createElement() 메서드를 사

developer-talk.tistory.com

appendChild() 메서드 구문

appendChild() 메서드 구문은 아래와 같습니다.

parentNode.appendChild(childNode);

parentNode는 부모 노드이며, childNode는 부모 노드에 추가하려는 HTML 요소입니다.

childNode가 기존 HTML 마크업에 존재하는 경우 appendChild() 메서드는 childNode를 parentNode에 추가합니다. 즉, childNode의 위치를 이동합니다. 해당 내용은 예시 2. HTML 요소 이동에서 확인할 수 있습니다.

appendChild() 메서드를 사용하는 경우

appendChild() 메서드는 주로 특정 이벤트가 발생했을 때, 새로운 요소를 부모 노드에 추가하는 용도로 사용합니다. 그리고 위에서 언급했듯이 HTML 마크업에 존재하는 노드를 appendNode() 메서드에 전달하면 위치가 이동되므로 요소를 재정렬하는 경우에도 사용할 수 있습니다.

예시 1. 버튼을 클릭하면 새로운 HTML 요소를 추가

버튼을 클릭하면 ul 요소 밑에 li 요소를 추가하는 예시입니다.

아래는 button 요소와 ul 요소가 존재하는 HTML 마크업입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button id="btnAppend">새로운 요소를 추가</button>
    <div>
      <ul id="category"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

먼저, id가 "btnAppend"인 button 요소를 클릭했을 때, 이벤트 핸들러가 동작하도록 button 요소에 click 이벤트 리스너를 추가합니다.

getElementById() 메서드로 id가 "btnAppend"인 button인 요소를 접근한 다음 click 이벤트 리스너를 추가하였습니다. 이제, 버튼을 클릭하면 콘솔에 문자열 "hi"가 출력됩니다.

const btnClick = document.getElementById("btnAppend");

btnClick.addEventListener("click", () => {
  console.log("hi");
});

[실행 결과]

버튼을 클릭하면 ul 요소 밑에 li 요소를 추가하기 위해 id가 "category"인 ul 요소를 접근한 다음 appendChild() 메서드를 사용하여 li 요소를 추가합니다.

const btnClick = document.getElementById("btnAppend");

btnClick.addEventListener("click", () => {
  const ulNode = document.getElementById("category");
  const liNode = document.createElement("li");
  
  liNode.textContent = "li 요소";
  ulNode.appendChild(liNode);
});

예시 2. HTML 요소 이동

이번에는 HTML 마크업에 존재하는 HTML 요소를 appendChild() 메서드를 사용하여 다른 요소에 추가했을 때, HTML 요소가 이동되는 것을 보여줍니다.

아래는 예시에 사용되는 HTML 마크업입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button id="btnAppend">HTML 요소 이동</button>
    <div>
      <ul id="category-1">
        <li>category-1</li>
        <li>category-2</li>
      </ul>
    </div>
    <div>
      <ul id="category-2">
        <li>category-3</li>
        <li>category-4</li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

아래는 HTML 마크업이 적용된 웹 페이지이며, 버튼을 클릭하면 category-1을 category-4 하위로 이동하는 코드를 구현할 것입니다.

아래는 버튼을 클릭했을 때, id가 "category-1"인 ul 요소의 첫 번째 자식 노드를 id가 "category-2"인 ul 요소에 추가하는 코드입니다.

순서 1. id가 "category-1"인 ul 요소를 접근한 다음 첫 번째 노드를 가져옵니다.

순서 2. id가 "category-2"인 ul 요소를 접근한 다음 appendChild() 메서드에 id가 "category-1"인 ul 요소의 첫 번째 자식 노드를 전달합니다.

const btnClick = document.getElementById("btnAppend");

btnClick.addEventListener("click", () => {
  const category1 = document.getElementById("category-1");
  const firstNode = category1.firstChild;

  // 첫 번째 자식 노드가 없을 수 있으므로 null 체크는 필수
  if (firstNode !== null) {
    const category2 = document.getElementById("category-2");
    category2.appendChild(firstNode);
  }
});

정리

appendChild() 메서드를 사용하여 자식 노드를 맨 마지막 위치에 추가할 수 있습니다.
appendChild() 메서드는 HTML 요소를 이동시키기 위해 사용할 수 있습니다.

저작자표시 비영리 변경금지

'JavaScript > DOM' 카테고리의 다른 글

[JavaScript]innerHTML 프로퍼티 사용 방법 (0)	2022.11.23
[JavaScript]HTML 태그 안의 텍스트 가져오기 및 설정 (0)	2022.11.21
[JavaScript]HTML 요소 생성하는 방법 (0)	2022.11.15
[JavaScript]형제 노드 가져오는 방법 (0)	2022.11.15
[JavaScript]부모, 자식 노드 가져오는 방법 (0)	2022.11.15