Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript appendChild() 완벽 가이드: DOM 노드에 요소 추가하는 방법

JavaScript의 appendChild() 메서드는 부모 노드의 마지막에 새로운 자식 노드를 추가하는 기능을 합니다. 이 메서드는 주로 <ul>이나 <ol> 같은 리스트에 <li> 항목을 동적으로 추가할 때 많이 사용됩니다. 여러 개의 항목을 추가하려면 appendChild() 문을 반복해서 호출해야 합니다.

JavaScript appendChild 사용법

웹 페이지에는 텍스트 목록, 이미지 갤러리, 커스텀 웹 요소 등 다양한 형태의 리스트가 곳곳에 존재합니다. 리스트의 내용이 무엇이든, 웹 개발에서 리스트는 빼놓을 수 없는 핵심 요소입니다.

리스트를 만들 때 보통 HTML에 값을 직접 하드코딩하는 경우가 많습니다. 하지만 appendChild 메서드를 활용하면 이 과정을 훨씬 효율적으로 처리할 수 있습니다. 이 메서드를 사용하면 리스트나 blockquote 같은 웹 요소의 마지막에 항목을 동적으로 추가할 수 있습니다.

이 가이드에서는 JavaScript의 appendChild()가 무엇인지, 어떻게 작동하는지 살펴보고 실제 예제를 통해 직접 익혀보겠습니다.

appendChild란 무엇인가?

appendChild()는 지정한 부모 노드의 마지막에 새 노드를 추가합니다. 주로 HTML 리스트에 항목을 추가하는 용도로 활용되며, 여기서 '노드'란 HTML DOM(문서 객체 모델)을 구성하는 모든 요소를 의미합니다.

appendChild()의 기본 문법은 다음과 같습니다:

parent.appendChild(child);
  • parent: 자식 노드를 추가할 대상이 되는 부모 요소입니다.
  • child: 부모 요소의 맨 아래에 추가될 자식 요소입니다.

부모 요소를 가져오려면 getElementById(), querySelector() 같은 DOM 선택 메서드를 사용해야 합니다. 또는 JavaScript에서 직접 HTML 요소를 생성한 뒤, 그 요소를 부모 객체로 활용할 수도 있습니다.

예를 들어 스콘 레시피 목록을 만든다면, 그 리스트는 여러 개의 노드로 구성됩니다. 리스트를 만드는 것이므로 해당 노드들은 대부분 <li> 태그일 것입니다. 마찬가지로 <img> 태그들을 담고 있는 부모 <div>는 자식으로 여러 개의 <img> 노드를 가질 수 있습니다.

appendChild() 실전 예제

이제 appendChild를 활용한 실제 애플리케이션을 만들어 보겠습니다. 10학년 학생 명단을 화면에 불러오는 웹사이트를 만들 것이며, 전체 과정은 세 단계로 나누어 진행합니다:

  • 프론트엔드 기본 구조 만들기
  • 요소 선택 및 생성하기
  • appendChild로 항목 추가하기

1단계: 프론트엔드 기본 구조 만들기

먼저 학생 이름 목록을 보여줄 기본 프론트엔드를 구성합니다. index.html 파일을 만들고 아래 코드를 붙여넣으세요:

<!DOCTYPE html>
<html>
    <head>
        <title>10학년 학급 명단</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>10학년 학급 명단</h1>
        <ul>
        </ul>
    </body>
    <script src="scripts.js"></script>
</html>

위 코드는 제목과 비어 있는 리스트 하나를 포함하는 기본적인 HTML 문서입니다. 리스트는 <ul> 태그로 표현되며, 아직 자식 항목은 없습니다.

다음으로 styles.css 파일에 몇 가지 스타일을 추가해 페이지의 디자인을 개선해 보겠습니다:

body {
    background-color: #f7f7f7;
    margin: auto;
    width: 50%;
}

이 CSS 규칙은 background-color 속성으로 페이지에 연한 회색 배경을 적용하고, <body> 태그의 내용을 화면 중앙으로 정렬합니다. 레이아웃 구조에 대해 더 알고 싶다면 CSS 박스 모델 관련 자료를 참고하세요.

아직 리스트 항목을 추가하지 않았기 때문에 페이지는 아무 기능도 하지 않습니다. 브라우저에서 열어보면 제목만 덩그러니 있는 상태입니다. 이제 JavaScript를 추가해 볼 차례입니다.

2단계: 요소 선택 및 생성하기

리스트에 항목을 추가하기 전에, 먼저 작업할 요소들을 선택해야 합니다. scripts.js 파일을 만들고 아래 코드를 입력하세요:

const students = document.querySelector("ul");

이 코드는 페이지에서 <ul> 태그를 가진 요소, 즉 우리의 리스트를 선택합니다. 이제 리스트에 추가할 새 요소를 생성해 보겠습니다:

let li = document.createElement("li");
li.textContent = "Steven";

이 코드는 "Steven"이라는 텍스트를 담은 <li> 요소를 생성합니다. 이제 남은 일은 새로 만든 이 요소를 리스트에 추가하는 것뿐입니다.

3단계: appendChild() 메서드 사용하기

appendChild()를 사용하면 노드에 요소를 추가할 수 있습니다. scripts.js 파일 맨 아래에 다음 코드를 추가하세요:

students.appendChild(li);

이 코드는 앞서 생성한 리스트 항목을 리스트에 추가합니다. 웹 페이지를 열어 결과를 확인해 보세요. 이제 리스트에 항목 하나가 표시될 것입니다.

코드를 더 효율적으로 만들 수도 있습니다. 학생을 리스트에 추가하는 함수를 만들면, createElement 코드를 반복해서 작성하지 않고도 여러 항목을 손쉽게 추가할 수 있습니다.

createElement와 textContent 관련 코드를 아래 함수로 바꿔 보세요:

function createStudent(name) {
    let li = document.createElement("li");
    li.textContent = name;
    return li;
}

이 함수는 호출될 때마다 새로운 <li> 요소를 생성해 반환합니다. 그다음 appendChild() 문을 이 함수를 사용하도록 수정합니다:

students.appendChild(createStudent("Mark"));
students.appendChild(createStudent("Chloe"));
students.appendChild(createStudent("Louise"));

이제 Mark, Chloe, Louise라는 세 명의 학생이 리스트에 추가됩니다. index.html 파일을 다시 열어 변경 사항이 잘 적용되었는지 확인해 보세요. 학급 명단에 세 개의 이름이 표시될 것입니다.

appendChild()로 항목을 다른 리스트로 이동하기

appendChild() 메서드는 단순히 항목을 추가하는 것뿐 아니라, 기존 항목을 다른 리스트로 이동시키는 데도 활용할 수 있습니다. 앞선 예제를 수정해서 확인해 보겠습니다.

먼저 HTML 페이지를 수정해 두 개의 리스트를 만듭니다:

...
    <body>
        <h1>10학년 학급 명단</h1>
        <h3>시험 응시</h3>
        <ul id="sat_test">
        </ul>
        <h3>시험 미응시</h3>
        <ul id="has_not_sat_test">
        </ul>
    </body>
...

'시험 응시'와 '시험 미응시' 두 개의 리스트를 만들었습니다. 이제 JavaScript 파일을 업데이트하여 두 리스트를 선택하고 학생 세 명을 생성합니다:

const sat_test = document.getElementById("sat_test");
const has_not_sat_test = document.getElementById("has_not_sat_test");

function createStudent(name) {
    let li = document.createElement("li");
    li.textContent = name;
    return li;
}

has_not_sat_test.appendChild(createStudent("Mark"));
has_not_sat_test.appendChild(createStudent("Chloe"));
has_not_sat_test.appendChild(createStudent("Louise"));

getElementById 메서드로 두 개의 리스트를 각각 선택했습니다. 이 코드는 Mark, Chloe, Louise를 '시험 미응시' 리스트에 추가합니다.

Louise가 방금 시험을 치렀다면, 그녀의 이름을 다른 리스트로 옮길 수 있습니다. 이때 appendChild() 메서드와 함께 lastChild 속성을 활용합니다:

var louise = has_not_sat_test.lastChild;
sat_test.appendChild(louise);

이 코드는 lastChild 속성으로 '시험 미응시' 리스트의 마지막 DOM 요소를 가져옵니다. 그런 다음 해당 요소를 '시험 응시' 리스트에 추가(append)합니다.

HTML 파일을 열어 확인해 보면, 처음에는 모든 학생 이름이 '시험 미응시' 리스트에 있지만, appendChild()를 통해 Louise의 이름이 '시험 응시' 리스트로 이동된 것을 볼 수 있습니다.

마치며

appendChild() 메서드는 특정 요소의 마지막에 새 노드를 추가할 때 사용합니다. appendChild()를 활용하면 어떤 요소든 요소 목록에 추가할 수 있습니다. 예를 들어 <section> 태그 안에 <div> 요소를 추가하는 것도 가능합니다.

학습을 위한 도전 과제로, appendChild() 메서드를 사용해 이미지 그리드를 만들어 보세요. 페이지가 로드될 때 appendChild()로 네 개의 이미지가 렌더링되도록 구현하면 좋은 연습이 됩니다.