JS LAB
    JS 4.6 · 4부. 브라우저와 DOM

    요소 만들고 넣기

    createElement 로 요소를 만들어 배열을 화면 목록으로 그립니다.

    예상 학습 시간 15분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 중급
    개념 설명

    화면에 없던 것을 만듭니다

    지금까지는 이미 있는 요소를 찾아 바꿨습니다. 목록에 항목을 더하려면 요소를 새로 만들어 넣어야 합니다.

    세 단계입니다.

    1. document.createElement 로 만듭니다.
    2. 글자와 class 를 채웁니다(4.3 · 4.4).
    3. append 로 부모 안에 넣습니다.
    최소 예제 · 편집 가능

    항목 하나 더하기

    script.js 
    const list = document.querySelector("#list");

const li = document.createElement("li");
li.textContent = "공책";

list.append(li);

console.log(list.children.length);
console.log(list.lastElementChild.textContent);
    출력
    2 공책

    createElement 로 만든 것은 아직 화면에 없습니다. append 로 넣어야 그때 보입니다.

    상세 사용법

    배열을 화면 목록으로

    가장 많이 하는 일입니다. 데이터 배열을 돌면서 요소를 만들어 넣습니다.

    script.js 
    const list = document.querySelector("#list");

const products = [
	{ name: "연필", stock: 3 },
	{ name: "공책", stock: 0 },
	{ name: "지우개", stock: 7 }
];

products.forEach(product => {
	const li = document.createElement("li");

	li.textContent = `${product.name} (${product.stock}개)`;
	if (product.stock === 0) {
		li.classList.add("soldout");
	}

	list.append(li);
});

console.log(list.children.length);
console.log(document.querySelectorAll(".soldout").length);
    출력
    3 1

    3부에서 배운 배열 다루기가 그대로 쓰입니다. 데이터를 먼저 거르거나 정렬한 뒤에 그리면 화면도 그대로 따라옵니다.

    상세 사용법

    다시 그리기

    목록이 바뀌면 지우고 다시 그리는 것이 가장 단순합니다. replaceChildren() 을 인자 없이 부르면 안이 비워집니다.

    script.js 
    const list = document.querySelector("#list");

console.log(list.children.length);

list.replaceChildren();
console.log(list.children.length);

["가", "나"].forEach(text => {
	const li = document.createElement("li");
	li.textContent = text;
	list.append(li);
});

console.log(list.children.length);
console.log(list.textContent);
    출력
    2 0 2 가나
    상세 사용법

    넣는 자리와 지우기

    script.js 
    const list = document.querySelector("#list");

const first = document.createElement("li");
first.textContent = "맨 앞";
list.prepend(first);

const last = document.createElement("li");
last.textContent = "맨 뒤";
list.append(last);

console.log(list.textContent);

list.firstElementChild.remove();
console.log(list.textContent);
    출력
    맨 앞가운데맨 뒤 가운데맨 뒤

    prepend 는 맨 앞, append 는 맨 뒤입니다. remove 는 자기 자신을 지웁니다 — 부모를 찾을 필요가 없습니다.

    흔한 실수

    처음에 자주 걸리는 것

    1. 만들기만 하고 넣지 않습니다

    createElement 만으로는 화면에 보이지 않습니다. 오류도 나지 않아 왜 안 보이는지 찾기 어렵습니다.

    2. 반복문 안에서 innerHTML 에 이어 붙입니다

    list.innerHTML += ... 는 돌 때마다 안을 통째로 다시 만듭니다. 붙여 둔 이벤트가 사라지고 항목이 많으면 눈에 띄게 느립니다. 

    list.innerHTML += "<li>" + name + "</li>";   // 이렇게 하지 않습니다
    3. 사용자 입력을 innerHTML 로 넣습니다

    4.3 에서 본 것과 같습니다. createElement 와 textContent 를 사용하면 이 걱정이 없습니다.

    실습 문제

    직접 해보기

    1. 번호를 붙여 그리기 난이도 하

    이름 배열을 1. 홍길동 형태로 목록에 그리세요.

    const list = document.querySelector("#list"); const names = ["홍길동", "김철수"]; list.replaceChildren(); names.forEach((name, i) => { const li = document.createElement("li"); li.textContent = `${i + 1}. ${name}`; list.append(li); }); console.log(list.children.length);
    2. 거르고 정렬해서 그리기 난이도 중

    상품 배열에서 재고가 있는 것만 골라 이름순으로 그리세요. 그린 개수를 출력합니다.

    그리기 전에 데이터를 먼저 다듬습니다. 3.3 과 3.5 를 잇습니다.
    const list = document.querySelector("#list"); const products = [ { name: "지우개", stock: 7 }, { name: "공책", stock: 0 }, { name: "연필", stock: 3 } ]; const shown = products .filter(p => p.stock > 0) .sort((a, b) => a.name.localeCompare(b.name)); list.replaceChildren(); shown.forEach(p => { const li = document.createElement("li"); li.textContent = p.name; list.append(li); }); console.log(list.children.length);
    요약

    이 단원의 정리

    • createElement 로 만들고, 채운 뒤, append 로 넣습니다.
    • 만들기만 하면 화면에 보이지 않습니다.
    • 배열을 돌면서 그리는 것이 가장 자주 하는 일입니다.
    • 바뀌면 replaceChildren() 으로 비우고 다시 그립니다.
    • innerHTML += 로 이어 붙이지 않습니다.