Bài 21: DOM nâng cao – tạo, thêm, xóa phần tử

Tiếp tục với Bài 28 – DOM nâng cao trong JavaScript, bạn sẽ học cách tạo mới, thêm vào và xoá phần tử HTML bằng JavaScript, từ đó giúp tạo web động mà không cần reload trang.

1. Tạo phần tử mới bằng createElement()

📋 Copylet newDiv = document.createElement("div")
newDiv.innerHTML = "Tôi là div mới"

2. Thêm phần tử vào trang với appendChild()

📋 Copylet container = document.getElementById("box")
container.appendChild(newDiv)

Phần tử mới sẽ nằm bên trong phần tử box.

3. Thêm vào đầu với prepend()

📋 Copycontainer.prepend(newDiv) // Thêm lên trên đầu

4. Xoá phần tử bằng remove()

📋 Copylet item = document.getElementById("oldItem")
item.remove()

5. Xoá con trong phần tử cha bằng removeChild()

📋 Copylet list = document.getElementById("myList")
let first = list.firstElementChild

list.removeChild(first)

6. Tạo nút bấm → thêm dòng mới

📋 Copy<ul id="fruitList"></ul>
<button onclick="addFruit()">Thêm trái cây</button>

📋 Copyfunction addFruit() {
  let li = document.createElement("li")
  li.innerText = "Trái cây mới"
  document.getElementById("fruitList").appendChild(li)
}

7. Giao diện học (code + output)

Tóm tắt bài 28

Bạn đã học:

• Tạo phần tử bằng createElement()
• Gán nội dung bằng innerHTML hoặc innerText
• Thêm vào DOM với appendChild() và prepend()
• Xoá phần tử bằng remove() hoặc removeChild()
• Tự động thêm dòng mới khi bấm nút

Bài tập

1. Tạo một nút → khi bấm sẽ tạo 1 thẻ <p> mới và thêm vào trang
2. Tạo 1 ô nhập nội dung + nút → bấm sẽ tạo 1 <li> chứa nội dung đó
3. Tạo danh sách và nút xóa → khi bấm xóa dòng đầu tiên
4. Tạo nhiều phần tử động khi click nút nhiều lần