11. 웹페이지 조종하기 (DOM 조작)/11.3 요소 추가하고 삭제하기

11.3.2 요소 추가하기 - 조립용 부품을 제품에 붙이기

thejavascript4kids 2025. 7. 15. 03:27

📘 11.3.2 요소 추가하기 - 조립용 부품을 제품에 붙이기

새로운 HTML 요소들을 만드는 법을 배웠으니, 이제는 그 요소들을 실제 웹페이지에 붙여서 사용자가 볼 수 있게 만드는 시간입니다. 지난 시간에 만든 요소들은 아직 메모리라는 보이지 않는 작업실에만 놓여있습니다. 마치 아름다운 그림을 그려두었지만 아직 액자에 넣어 벽에 걸지 않은 상태와 같습니다.

이제 appendChild라는 도구를 사용해서 이 요소들을 웹페이지라는 갤러리에 전시할 차례입니다.

🧠 새로운 단어들과 친해지기

요소들을 웹페이지에 배치할 때 사용하는 단어들을 만나보겠습니다.

단어 쉬운 설명
appendChild 만든 요소를 다른 요소 안에 마지막 자식으로 넣어주는 명령어예요.
부모 요소 다른 요소들을 안에 담고 있는 큰 상자 같은 요소예요.
자식 요소 부모 요소 안에 들어가는 작은 요소들이예요.
DOM 가족 구조 웹페이지의 요소들이 나무처럼 연결된 가족 같은 구조예요.

appendChild는 "덧붙이다"와 "자식"이 만나 이루어진 단어입니다. 말 그대로 부모 요소에게 새로운 자식을 선물해주는 도구입니다.

✨ 요소 추가하기의 핵심 개념

지난 시간에 createElement로 새로운 요소를 만들었을 때, 그 요소들은 메모리라는 임시 공간에만 존재했습니다. 마치 조립 블록을 만들어놓고 아직 완성품에 붙이지 않은 상태와 같았지요. 이제 appendChild를 사용해서 실제 웹페이지에 붙여야 사용자가 볼 수 있게 됩니다.

웹페이지는 가족 같은 따뜻한 구조로 이루어져 있습니다. 큰 상자(부모 요소) 안에 작은 상자들(자식 요소)이 들어있고, 그 작은 상자 안에 또 더 작은 상자들이 들어있는 포근한 구조입니다. appendChild는 이런 가족 구조에서 새로운 가족 구성원을 맞이하는 역할을 합니다.

가장 중요한 점은 appendChild로 추가된 요소는 부모 요소의 맨 마지막에 자리를 잡는다는 것입니다. 마치 책장에 새로운 책을 꽂을 때 맨 끝에 정성스럽게 꽂는 것과 같습니다. 그리고 한 번 추가하면 즉시 웹페이지에 나타나서 사용자가 바로 볼 수 있게 됩니다.

재미있는 비유: 학교 게시판 꾸미기 프로젝트

요소 추가하기를 더 쉽게 이해하기 위해 학교 게시판 꾸미기 프로젝트를 떠올려보겠습니다.

여러분이 학교에서 교실 게시판을 꾸미는 프로젝트를 하고 있다고 상상해보세요. 미술 시간에 예쁜 스티커, 색종이, 그림들을 정성스럽게 만들어뒀지만, 아직 책상 위에만 가지런히 놓여있습니다.

이제 풀과 테이프를 사용해서 이 장식들을 실제 게시판에 붙여야 합니다. "이 꽃 스티커를 게시판 왼쪽에 붙여주세요!"라고 말하면, 스티커를 조심스럽게 들어서 게시판의 맨 아래쪽에 차례차례 붙여줍니다.

이때 게시판은 부모 요소이고, 스티커들은 자식 요소가 되는 것입니다. 게시판에는 이미 다른 장식들(다른 자식 요소들)이 붙어있을 수 있지만, 새로운 스티커는 항상 맨 마지막에 정중하게 추가됩니다.

웹페이지도 똑같은 원리입니다. appendChild는 새로 만든 요소를 실제 웹페이지의 적절한 위치에 붙여서 사용자가 볼 수 있게 만들어주는 것입니다.

🎯 요소 추가하기를 배우는 이유

웹페이지가 살아 숨쉬며 역동적으로 변하는 공간이 되려면 요소 추가하기 기능이 꼭 필요합니다. 사용자의 행동에 따라 실시간으로 새로운 내용이 자연스럽게 나타나야 하기 때문입니다.

예를 들어, 할 일 목록 앱에서 사용자가 "숙제하기"라고 입력하고 추가 버튼을 누르면, 새로운 할 일 항목이 목록에 부드럽게 나타나야 합니다. 이때 createElement로 새로운 항목을 만들고, appendChild로 목록에 추가하는 것입니다.

댓글 시스템에서도 마찬가지입니다. 누군가 댓글을 쓰면 새로운 댓글 상자가 화면에 나타나야 하고, 온라인 게임에서는 새로운 캐릭터나 아이템이 계속 등장해야 합니다.

무엇보다 사용자 맞춤형 경험을 만들 수 있게 됩니다. 사용자가 선택한 옵션에 따라 웹페이지에 새로운 내용이 추가되고, 개인화된 화면을 선사할 수 있습니다.

⚙️ 기본 문법 살펴보기

요소를 추가하는 기본 문법은 간단하면서도 매우 강력합니다.

// 기본 구조
부모요소.appendChild(자식요소);

실제 사용 예시:

// 1단계: 새로운 요소 만들기
let 새요소 = document.createElement("p");
새요소.textContent = "새로운 단락입니다!";

// 2단계: 부모 요소 찾기
let 부모상자 = document.getElementById("content");

// 3단계: 부모에 자식 추가하기
부모상자.appendChild(새요소);

여기서 중요한 점은 순서입니다. 먼저 추가할 요소를 완전히 준비하고, 그다음에 부모 요소를 찾고, 마지막에 appendChild로 정성스럽게 연결하는 것입니다.

🧪 직접 해보면서 배우기

이제 구체적인 예시를 통해 요소 추가하기가 어떻게 작동하는지 자세히 살펴보겠습니다.

🔹 첫 번째 예시: 첫 번째 요소 추가하기

가장 기본적인 단락 요소를 웹페이지에 추가해보는 첫 번째 시도입니다.

// 새로운 단락을 만들고 내용을 넣어요
let 새단락 = document.createElement("p");
새단락.textContent = "안녕하세요! 저는 새로 추가된 단락이에요.";
새단락.style.color = "purple";

// 단락을 추가할 위치(부모 요소)를 찾아요
let 메인상자 = document.getElementById("main");

// 단락을 컨테이너에 추가해요
메인상자.appendChild(새단락);

console.log("새 단락이 웹페이지에 나타났어요! 🎉");
console.log("이제 사용자가 볼 수 있습니다!");

이 과정을 차근차근 살펴보면, 먼저 새로운 단락 요소를 만들고 내용과 스타일을 정성스럽게 설정합니다. 그다음 getElementById로 부모 역할을 할 요소를 찾고, appendChild로 새로운 단락을 부모에게 소중히 추가합니다. 이제 웹페이지를 새로고침하면 보라색 글씨의 새로운 단락을 볼 수 있습니다.

🔹 두 번째 예시: 목록 항목 여러 개 추가하기

이번에는 목록에 여러 개의 항목을 순서대로 추가해보겠습니다.

// 목록을 추가할 위치를 먼저 찾아요
let 쇼핑목록상자 = document.getElementById("shoppingList");

// 첫 번째 쇼핑 항목을 만들고 추가해요
let 사과항목 = document.createElement("li");
사과항목.textContent = "🍎 사과 3개";
쇼핑목록상자.appendChild(사과항목);

// 두 번째 쇼핑 항목을 만들고 추가해요
let 우유항목 = document.createElement("li");
우유항목.textContent = "🥛 우유 1팩";
쇼핑목록상자.appendChild(우유항목);

// 세 번째 쇼핑 항목을 만들고 추가해요
let 식빵항목 = document.createElement("li");
식빵항목.textContent = "🍞 식빵 1개";
쇼핑목록상자.appendChild(식빵항목);

console.log("쇼핑 목록에 3개 항목이 순서대로 추가되었어요! 🛒");

이 예시에서는 하나의 부모 요소(쇼핑목록상자)에 여러 개의 자식 요소를 차례대로 추가합니다. 각 항목은 추가되는 순서대로 목록에 나타나며, 사과, 우유, 식빵 순서로 정렬되어 표시됩니다.

🔹 세 번째 예시: 버튼과 이미지 함께 추가하기

마지막으로 서로 다른 성격의 요소들을 하나의 영역에 추가해보겠습니다.

// 먼저 멋진 버튼을 만들어요
let 게임버튼 = document.createElement("button");
게임버튼.textContent = "게임 시작! 🎮";
게임버튼.style.backgroundColor = "orange";
게임버튼.style.color = "white";
게임버튼.style.padding = "10px";

// 예쁜 이미지도 만들어요
let 게임이미지 = document.createElement("img");
게임이미지.setAttribute("src", "game-character.png");
게임이미지.setAttribute("alt", "게임 캐릭터");
게임이미지.style.width = "100px";

// 추가할 게임 영역을 찾아요
let 게임영역 = document.getElementById("gameZone");

// 버튼을 먼저 추가하고, 그다음에 이미지를 추가해요
게임영역.appendChild(게임버튼);
게임영역.appendChild(게임이미지);

console.log("게임 영역에 버튼과 이미지가 추가되었어요! 🎲");
console.log("버튼이 위에, 이미지가 아래에 나타날 거예요!");

이 예시에서는 버튼과 이미지라는 서로 다른 요소를 같은 부모에 추가합니다. 먼저 추가한 버튼이 위에, 나중에 추가한 이미지가 아래에 나타나게 됩니다.

🧚‍♀️ 이야기로 다시 배우기: 학교 전시회 작품 진열하기

지금까지 배운 내용을 하나의 이야기로 다시 정리해보겠습니다.

여러분이 학교 과학 전시회에서 작품을 진열하는 도우미로 일하고 있다고 상상해보세요.

미술실에서 학생들이 만든 새로운 과학 작품 3개가 완성되었습니다. "태양계 모형", "화산 모델", "전기 회로도"라는 멋진 작품들이었습니다. 하지만 이 작품들은 아직 미술실 책상 위에만 조용히 놓여있었습니다.

여러분은 이 작품들을 전시실의 적절한 진열장에 하나씩 정성스럽게 배치하기 시작했습니다.

"태양계 모형"은 우주 코너 진열장의 맨 끝에, "화산 모델"은 지구과학 진열장의 맨 끝에, "전기 회로도"는 물리학 진열장의 맨 끝에 차례대로 소중히 올려놓았습니다.

이제 전시회를 찾는 사람들이 새로운 작품들을 보고 감상할 수 있게 되었습니다. 작품들이 미술실에만 있을 때는 아무도 볼 수 없었지만, 적절한 진열장에 배치해준 덕분에 모든 사람이 감상할 수 있게 되었습니다.

이처럼 appendChild는 새로 만든 요소들을 웹페이지의 적절한 위치에 배치해서 사용자가 접근할 수 있게 만들어주는 역할을 합니다.

🧠 자주 하는 실수와 주의할 점

요소를 추가할 때 쉽게 실수할 수 있는 부분들을 미리 알아두면 더욱 안전하게 코딩할 수 있습니다.

❌ 실수 1: 부모 요소를 찾지 않고 추가하려고 하기

// 잘못된 방법 - 부모 없이 추가 시도
let 새요소 = document.createElement("p");
새요소.textContent = "새로운 내용";
appendChild(새요소); // 에러 발생!

// 올바른 방법 - 부모를 먼저 찾기
let 새요소 = document.createElement("p");
새요소.textContent = "새로운 내용";
let 부모 = document.getElementById("container");
부모.appendChild(새요소);

이런 실수가 생기는 이유는 appendChild가 반드시 어떤 요소의 특별한 기능으로 호출되어야 하기 때문입니다. 혼자서는 존재할 수 없고, 항상 부모 요소가 있어야 합니다.

❌ 실수 2: 존재하지 않는 부모에 추가하려고 하기

// 위험한 방법 - 존재하지 않는 ID 사용
let 부모 = document.getElementById("notExist");
let 새요소 = document.createElement("p");
부모.appendChild(새요소); // 부모가 null이면 에러!

// 안전한 방법 - 부모 존재 여부 확인
let 부모 = document.getElementById("container");
if (부모) {
    let 새요소 = document.createElement("p");
    새요소.textContent = "안전하게 추가된 내용";
    부모.appendChild(새요소);
} else {
    console.log("부모 요소를 찾을 수 없어요! ID를 확인해주세요.");
}

가끔 HTML 파일에서 ID를 잘못 쓰거나, 요소가 아직 로드되지 않았을 때 이런 오류가 발생합니다. 항상 부모 요소가 존재하는지 먼저 확인하는 습관을 기르는 것이 중요합니다.

❌ 실수 3: 빈 요소를 추가해서 아무것도 안 보이기

// 문제가 있는 예시 - 내용이 없는 요소 추가
let 새요소 = document.createElement("p");
// textContent를 설정하지 않음!
let 부모 = document.getElementById("container");
부모.appendChild(새요소); // 빈 단락만 추가됨

// 완전한 예시 - 내용이 있는 요소 추가
let 새요소 = document.createElement("p");
새요소.textContent = "사용자가 볼 수 있는 내용"; // 내용 설정 필수!
새요소.style.color = "blue"; // 스타일도 설정
let 부모 = document.getElementById("container");
부모.appendChild(새요소);

내용이 없는 요소는 기술적으로는 추가되지만 사용자에게는 보이지 않습니다. 마치 빈 액자를 전시실에 걸어놓은 것과 같아서 의미가 없습니다.

✏️ 연습문제로 개념 다지기

강물이 자연스럽게 바다로 흘러가듯, 우리도 연습을 통해 요소 추가하기를 자연스럽게 익혀보겠습니다.

Ex1) "message" 영역에 새로운 환영 메시지를 추가해보자

// 새로운 환영 메시지 요소를 만들어요
let 환영메시지 = document.createElement("p");

// 환영 메시지 내용을 설정해요
환영메시지.textContent = "환영합니다! 새로운 모험이 시작됩니다! 🌟";

// 메시지를 예쁘게 꾸며요
환영메시지.style.fontSize = "18px";
환영메시지.style.color = "green";

// 메시지를 추가할 부모 요소를 찾아요
let 메시지상자 = document.getElementById("message");

// 부모 요소에 환영 메시지를 추가해요
메시지상자.appendChild(환영메시지);

// 작업 완료 메시지를 출력해요
console.log("환영 메시지가 추가되었어요!");

Ex2) "buttonArea"에 특별한 버튼을 만들어서 추가해보자

// 새로운 특별한 버튼을 만들어요
let 특별버튼 = document.createElement("button");

// 버튼에 특별한 텍스트를 넣어요
특별버튼.textContent = "특별한 버튼 ✨";

// 버튼을 보라색 배경에 흰 글씨로 꾸며요
특별버튼.style.backgroundColor = "purple";
특별버튼.style.color = "white";
특별버튼.style.padding = "15px";

// 버튼을 추가할 영역을 찾아요
let 버튼영역 = document.getElementById("buttonArea");

// 영역에 특별한 버튼을 추가해요
버튼영역.appendChild(특별버튼);

// 작업 완료 메시지를 출력해요
console.log("특별한 버튼이 추가되었어요!");

Ex3) 안전하게 요소를 추가하는 완벽한 코드를 작성해보자

// 추가할 부모 요소를 찾아요
let 부모 = document.getElementById("content");

// 부모 요소가 존재하는지 먼저 확인해요
if (부모) {
    // 새로운 제목 요소를 만들어요
    let 새제목 = document.createElement("h3");

    // 제목 내용을 설정해요
    새제목.textContent = "새로운 섹션 제목";

    // 제목을 가운데 정렬하고 색깔을 설정해요
    새제목.style.textAlign = "center";
    새제목.style.color = "navy";

    // 안전하게 제목을 추가해요
    부모.appendChild(새제목);

    // 성공 메시지를 출력해요
    console.log("제목이 안전하게 추가되었어요!");
} else {
    // 부모 요소를 찾지 못한 경우 알려줘요
    console.log("content 요소를 찾을 수 없어요! HTML을 확인해주세요.");
}

🤔 조금 더 어려운 문제로 실력 확인하기

기본 연습을 마쳤으니, 이제 조금 더 깊이 있는 문제들을 통해 요소 추가하기에 대한 이해를 점검해보겠습니다.

Q1. appendChild로 추가된 요소가 부모 요소의 어느 위치에 나타나는지 설명해보세요.

정답: appendChild로 추가된 요소는 부모 요소의 맨 마지막(끝) 위치에 나타납니다.

해설: 마치 책장에 새로운 책을 꽂을 때 맨 끝에 꽂는 것과 같습니다. 부모 요소에 이미 다른 자식 요소들이 있다면 그 뒤에 추가되고, 아무것도 없다면 첫 번째 자식이 됩니다. 이 순서는 요소를 추가하는 순서에 따라 결정됩니다.

Q2. 다음 코드에서 잘못된 부분을 찾고 안전하게 수정해보세요.

let newDiv = document.createElement("div");
let container = document.getElementById("notExist");
container.appendChild(newDiv);

정답: 존재하지 않는 ID로 부모 요소를 찾고 있어서 container가 null이 될 수 있습니다.

해설: getElementById("notExist")는 해당 ID가 없으면 null을 반환하는데, null.appendChild()를 호출하면 에러가 발생합니다. 안전한 코드로 수정하면:

let 새디브 = document.createElement("div");
새디브.textContent = "새로운 내용"; // 내용도 추가
let 컨테이너 = document.getElementById("container"); // 올바른 ID 사용
if (컨테이너) {
    컨테이너.appendChild(새디브);
} else {
    console.log("컨테이너를 찾을 수 없어요!");
}

🔄 이전 단원 복습 - 함께 기억해요!

새로운 내용을 배우는 것도 중요하지만, 이전에 배운 내용들도 잊지 않도록 함께 되새겨보겠습니다.

🔁 복습 문제 1: 새 요소 만들기와 추가하기 결합 (11.3.1단원 복습)

11.3.1단원에서 배운 새 요소 만들기와 이번에 배운 요소 추가하기를 완전히 결합해보겠습니다.

// 11.3.1단원의 새 요소 만들기와 11.3.2단원의 요소 추가하기 완전 결합하기
function 완전한기사만들기() {
    // 기사 전체를 담을 컨테이너 찾기
    let 뉴스상자 = document.getElementById("newsArea");

    if (뉴스상자) {
        // 1. 기사 제목 만들기 (11.3.1에서 배운 방법)
        let 기사제목 = document.createElement("h2");
        기사제목.textContent = "오늘의 특별한 뉴스";
        기사제목.style.color = "darkblue";

        // 2. 기사 내용 만들기
        let 기사내용 = document.createElement("p");
        기사내용.textContent = "오늘 학교에서 정말 멋진 과학 실험이 있었어요. 모든 학생들이 참여해서 즐거운 시간을 보냈습니다.";

        // 3. 기사 이미지 만들기
        let 기사이미지 = document.createElement("img");
        기사이미지.setAttribute("src", "science-experiment.jpg");
        기사이미지.setAttribute("alt", "과학 실험 사진");
        기사이미지.style.width = "100%";
        기사이미지.style.maxWidth = "300px";

        // 4. 기사 작성자 정보 만들기
        let 작성자정보 = document.createElement("p");
        작성자정보.textContent = "작성자: 김기자 | 작성일: 2024년 6월 18일";
        작성자정보.style.fontSize = "12px";
        작성자정보.style.color = "gray";

        // 5. 모든 요소를 순서대로 추가하기 (11.3.2에서 배운 방법)
        뉴스상자.appendChild(기사제목);    // 제목 먼저
        뉴스상자.appendChild(기사내용);    // 그다음 내용
        뉴스상자.appendChild(기사이미지);  // 그다음 이미지
        뉴스상자.appendChild(작성자정보);  // 마지막에 작성자 정보

        console.log("완전한 뉴스 기사가 성공적으로 추가되었어요!");
    } else {
        console.log("뉴스 영역을 찾을 수 없어요!");
    }
}

// 완전한 기사 생성 및 추가 실행하기
완전한기사만들기();

해답 설명: 새로 만든 여러 요소들을 논리적인 순서(제목 → 내용 → 이미지 → 작성자)대로 추가하면 완전한 구조를 가진 콘텐츠를 만들 수 있습니다. 각 요소가 의미있는 순서로 배치되어 사용자가 자연스럽게 읽을 수 있습니다.

🔁 복습 문제 2: 모든 DOM 조작 기능 결합하기 (11.1, 11.2단원 복습)

지금까지 배운 모든 DOM 조작 기능을 한 번에 사용해보겠습니다.

// 모든 DOM 조작 기능을 결합한 종합 예제
function 연락처카드만들기() {
    console.log("연락처 카드 만들기 시작!");

    // 1. 기존 요소 찾기 및 수정 (11.1, 11.2단원)
    let 기존제목 = document.querySelector("#pageTitle");
    if (기존제목) {
        기존제목.textContent = "연락처 관리 시스템";  // 11.2.1: 텍스트 변경
        기존제목.style.textAlign = "center";         // 11.2.2: 스타일 변경
        기존제목.setAttribute("title", "연락처를 관리하는 페이지입니다"); // 11.2.3: 속성 변경
    }

    // 2. 새로운 연락처 카드 전체 구조 만들기 (11.3.1, 11.3.2단원)
    let 연락처상자 = document.getElementById("contactArea");

    if (연락처상자) {
        // 카드 컨테이너 만들기
        let 카드디브 = document.createElement("div");
        카드디브.style.border = "2px solid #ccc";
        카드디브.style.padding = "20px";
        카드디브.style.margin = "10px";
        카드디브.style.backgroundColor = "lightblue";

        // 이름 제목 만들기
        let 이름제목 = document.createElement("h3");
        이름제목.textContent = "김철수";
        이름제목.style.color = "darkblue";

        // 전화번호 정보 만들기
        let 전화번호정보 = document.createElement("p");
        전화번호정보.textContent = "📞 전화번호: 010-1234-5678";

        // 이메일 정보 만들기
        let 이메일정보 = document.createElement("p");
        이메일정보.textContent = "✉️ 이메일: chulsu@example.com";

        // 연락 버튼 만들기
        let 연락버튼 = document.createElement("button");
        연락버튼.textContent = "연락하기";
        연락버튼.style.backgroundColor = "green";
        연락버튼.style.color = "white";
        연락버튼.style.padding = "8px 16px";

        // 모든 요소를 카드에 추가하기
        카드디브.appendChild(이름제목);      // 이름 먼저
        카드디브.appendChild(전화번호정보);  // 전화번호
        카드디브.appendChild(이메일정보);    // 이메일
        카드디브.appendChild(연락버튼);      // 연락 버튼

        // 완성된 카드를 페이지에 추가하기
        연락처상자.appendChild(카드디브);

        console.log("완전한 연락처 카드가 생성되었어요!");
    } else {
        console.log("연락처 영역을 찾을 수 없어요!");
    }
}

// 종합 DOM 조작 실행하기
연락처카드만들기();

해답 설명: 지금까지 배운 모든 DOM 조작 기능을 하나의 프로젝트에 결합하면 완전한 웹 어플리케이션의 한 기능을 만들 수 있습니다. 요소 찾기, 수정하기, 새로 만들기, 추가하기를 모두 조합하면 실제로 사용할 수 있는 기능을 구현할 수 있습니다.

HTML 요소들을 웹페이지에 배치하는 모든 비밀을 탐험해보았습니다. 이제 여러분도 새로 만든 요소들을 웹페이지에 자유자재로 붙일 수 있는 웹 개발자가 되었습니다. 다음 시간에는 요소를 삭제하는 방법을 배워보겠습니다.

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용 이해했나요?
appendChild의 기본 개념 ✅
기본 사용법과 문법 ✅
주요 특징과 차이점 ✅
자주 하는 실수들 ✅
실전 예제 이해 ✅

🎯 추가 연습 문제들

더 많은 연습을 원하는 여러분을 위한 추가 문제들입니다.

추가 문제 1. "message"라는 ID를 가진 요소에 새로운 단락을 추가해보세요.

// 답:
let 새단락 = document.createElement("p");
새단락.textContent = "새로운 메시지입니다!";

let 메시지상자 = document.getElementById("message");
메시지상자.appendChild(새단락);
console.log("메시지 추가 완료");

추가 문제 2. 버튼을 만들어서 "buttonArea"에 추가해보세요.

// 답:
let 새버튼 = document.createElement("button");
새버튼.textContent = "새 버튼";
새버튼.style.backgroundColor = "green";

let 버튼영역 = document.getElementById("buttonArea");
버튼영역.appendChild(새버튼);
console.log("버튼 추가 완료");

추가 문제 3. 안전하게 요소를 추가하는 코드를 작성해보세요.

// 답:
let 부모 = document.getElementById("content");
if (부모) {
    let 새요소 = document.createElement("h3");
    새요소.textContent = "새로운 제목";
    부모.appendChild(새요소);
    console.log("제목 추가 완료");
} else {
    console.log("부모 요소를 찾을 수 없어요!");
}

추가 문제 4. appendChild로 추가된 요소는 어디에 위치하나요?

답: appendChild로 추가된 요소는 부모 요소의 맨 마지막(끝)에 위치합니다. 이미 다른 자식 요소들이 있다면 그 뒤에 추가되고, 아무것도 없다면 첫 번째 자식이 됩니다.

추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

let newDiv = document.createElement("div");
let container = document.getElementById("notExist");
container.appendChild(newDiv);

답: 존재하지 않는 ID로 부모를 찾고 있습니다. 올바른 코드:

let 새디브 = document.createElement("div");
새디브.textContent = "내용 추가"; // 내용도 설정
let 컨테이너 = document.getElementById("container"); // 올바른 ID
if (컨테이너) {
    컨테이너.appendChild(새디브);
} else {
    console.log("컨테이너를 찾을 수 없어요!");
}

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해보겠습니다.

1단계 과정: 요소 생성 → 내용 설정 → 부모 찾기 → appendChild로 추가 → 화면에 표시

2단계 과정: 부모 찾기 → 첫 번째 요소 생성 및 추가 → 두 번째 요소 생성 및 추가 → 세 번째 요소 생성 및 추가

3단계 과정: 버튼 생성 및 스타일 → 이미지 생성 및 속성 → 부모 찾기 → 각각 순서대로 추가

📂 마무리 정보

오늘 배운 11.3.2 내용이 여러분의 자바스크립트 지식 상자에 소중히 보관되었나요? 다음 시간에는 더욱 흥미로운 내용으로 찾아뵙겠습니다.

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.


🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

'11. 웹페이지 조종하기 (DOM 조작) > 11.3 요소 추가하고 삭제하기' 카테고리의 다른 글

11.3.3 요소 삭제하기 - 디지털 방 청소하기  (0) 2025.07.15
11.3.1 새 요소 만들기 - 웹페이지 조립 공장에서 새 부품 만들기  (0) 2025.07.15

'11. 웹페이지 조종하기 (DOM 조작)/11.3 요소 추가하고 삭제하기'의 다른글

  • 현재글11.3.2 요소 추가하기 - 조립용 부품을 제품에 붙이기

관련글

티스토리툴바