Level: Intermediate | Player: 17_DOM_Selection and_View

Learning Objectives

Change the tree to createElement, appendChild, prepend, and remove.
Change the class to classList as Add/Remove/Toggle.
Change the inline style with the style property.
Efficiently insert multiple nodes into DocumentFragment.
Set text and properties safely.

1. Creating and adding elements

const li = document.createElement("li");
li.textContent = "new item";
list.appendChild(li);

append can receive multiple nodes and strings at once. prepend is added in front.

2. Remove

target.remove();
parent.removeChild(target); //old fashioned

3. classList

el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("open");
el.classList.contains("active");

Be careful because className = "..." overwrites all existing classes.

4. style

el.style.color = "red";
el.style.backgroundColor = "yellow";

background-color in CSS becomes backgroundColor in camel case in JavaScript.

5. DocumentFragment

Use fragment to reduce reflow when inserting many nodes at once.

const frag = document.createDocumentFragment();
for (let i = 0; i < 100; i += 1) {
  const li = document.createElement("li");
  li.textContent = `item ${i}`;
  frag.appendChild(li);
}
list.appendChild(frag);

Core example

file	Contents covered
index.html	Example HTML
01_create_element.js	createElement + appendChild
02_append_remove.js	append/prepend/remove
03_classlist.js	classList add/remove/toggle
04_style.js	style property settings

⚠️ Common Mistakes

Pass a string to appendChild (nodes only, append is possible).
Decreased performance by adding to the parent every time within a loop.
Delete the existing class with className = "x".
Missing style unit (px, etc.).
AppendChild → Only moves the same node to two places (not duplicates).

❓ Frequently Asked Questions (FAQ)

Q1. Difference between appendChild and append? A. append receives multiple node/string and has no return value. appendChild returns only one node, the added node.

Q2. Why is classList better? A. It can be safely manipulated without affecting other classes.

Q3. Should I use inline style or CSS class? A. If possible, use class toggle, and only dynamic calculated values (e.g. coordinates) inline style.

Example files

The runnable files used in this lesson. Copy them into your own project and experiment.

src/01_create_element.jsJavaScript

/**
 *createElement creates a new element and adds it to the list.
 */
const list = document.querySelector("#list");
const li = document.createElement("li");
li.textContent = "new item (createElement)";
list.appendChild(li);

src/02_append_remove.jsJavaScript

/**
 *Use append/prepend/remove.
 */
const list = document.querySelector("#list");

list.append("string node", document.createElement("hr"));

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

//Remove first item after some time
setTimeout(() => {
  first.remove();
  console.log("First item removed");
}, 1000);

src/03_classlist.jsJavaScript

/**
 *Add/remove/toggle classes with classList.
 */
const title = document.querySelector("#title");
title.classList.add("active");

const btn = document.querySelector("#btn");
btn.classList.toggle("hidden");
console.log("btn hidden?", btn.classList.contains("hidden"));
btn.classList.toggle("hidden"); //wonbok

src/04_style.jsJavaScript

/**
 *Apply inline style with the style property.
 */
const box = document.querySelector("#box");
box.style.color = "white";
box.style.backgroundColor = "steelblue";
box.style.padding = "12px";
box.style.borderRadius = "8px";

src/index.htmlHTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
<title>DOM manipulation</title>
    <style>
      .active { color: white; background: tomato; }
      .hidden { display: none; }
    </style>
  </head>
  <body>
<h1 id="title">DOM manipulation example</h1>
    <ul id="list">
<li>Existing item</li>
    </ul>
<button id="btn">Button</button>
<p id="box">Box</p>

    <script src="01_create_element.js"></script>
    <script src="02_append_remove.js"></script>
    <script src="03_classlist.js"></script>
    <script src="04_style.js"></script>
  </body>
</html>

Assignment

Create a page that adds the value in the input window as a new <li> to the end of the list each time you press the button. If it is an empty value, it is not added.

The reference solution is shown below.

Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

homework_01.htmlHTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
<title>Assignment 18-1</title>
  </head>
  <body>
    <input id="text" type="text" placeholder="to do" />
<button id="add">Add</button>
    <ul id="todos"></ul>
    <script src="homework_01.js"></script>
  </body>
</html>

homework_01.jsJavaScript

/**
 *Takes input and adds items to the list.
 */
const input = document.querySelector("#text");
const addBtn = document.querySelector("#add");
const todos = document.querySelector("#todos");

addBtn.addEventListener("click", () => {
  const value = input.value.trim();
  if (!value) return;
  const li = document.createElement("li");
  li.textContent = value;
  todos.appendChild(li);
  input.value = "";
  input.focus();
});

DOM Manipulation