JavaScript appendChild(): คู่มือเพิ่ม Node เข้า DOM

เมธอด JavaScript appendChild() เพิ่ม item ท้าย node ใช้บ่อยกับ <li> items ใน list ต้องใช้ multiple appendChild() ถ้าอยากเพิ่มหลาย items

วิธีใช้ JavaScript appendChild

Lists มี text, images, custom web elements ทุกอย่าง แต่ทุกหน้าเว็บเต็มไปด้วย lists สร้าง list ด้วย HTML hardcode แต่เร่งได้ด้วย appendChild() เพิ่ม item ท้าย list หรือ web element อื่น (blockquote)

JavaScript appendChild คืออะไร?

appendChild() เพิ่ม node ท้าย parent node ใช้เพิ่ม items ใน HTML list Node = item ใดๆ ใน HTML DOM

Syntax:

parent.appendChild(child);

• parent: element ที่จะเพิ่ม child เข้าไป
• child: element ที่จะ append ท้าย parent

ต้องใช้ getElementById() หรือ getter อื่นดึง element หรือสร้าง HTML element ใน JS แล้วใช้เป็น parent

List สูตรสคอน nodes = <li> tags Parent <div> มี <img> children ใช้ appendChild() เพิ่ม <li> เข้า <ul> หรือ <ol> บ่อยสุด

ตัวอย่าง appendChild(): Class Roster App

สร้าง app โหลดรายชื่อนักเรียนชั้น ม.4 แบบ 3 ขั้นตอน

1. Front End (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>Tenth Grade Class Roster</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Tenth Grade Class Roster</h1>
  <ul></ul>
</body>
<script src="scripts.js"></script>
</html>

2. CSS (styles.css)

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

3. JavaScript (scripts.js)

Select <ul> และสร้าง element:

const students = document.querySelector("ul");
let li = document.createElement("li");
li.textContent = "Steven";

เพิ่มเข้า list:

students.appendChild(li);

Result: list มี Steven 1 คน

ปรับปรุง: ใช้ Function สร้างหลายคน

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

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

Result: 4 ชื่อ (Steven, Mark, Chloe, Louise)

ย้าย Item ระหว่าง Lists

appendChild() ย้าย item ระหว่าง lists ได้ (node ถูกย้าย ไม่ได้ copy)

HTML: 2 Lists

<h3>Sat Test</h3>
<ul id="sat_test"></ul>
<h3>Has Not Sat Test</h3>
<ul id="has_not_sat_test"></ul>

JS: เพิ่มนักเรียน 3 คนใน "Has Not Sat Test" แล้วย้าย Louise

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"));

// Louise สอบแล้ว ย้ายไป Sat Test
var louise = has_not_sat_test.lastChild;
sat_test.appendChild(louise);

Result: "Has Not Sat Test" เหลือ Mark, Chloe | "Sat Test" มี Louise

สรุป

appendChild() สร้าง node ท้าย element ใช้เพิ่ม element ใดๆ เข้า list ได้ เช่น <div> เข้า <section>

Challenge: ลองใช้ appendChild() สร้าง image grid 4 รูป โหลดหน้าแล้ว render 4 images