JavaScript HTML DOM Elements (Nodes)
Thêm và xóa nút (Phần tử HTML)
Tạo phần tử HTML mới (nút)
Để thêm một phần tử mới vào HTML DOM, trước tiên bạn phải tạo phần tử (nút phần tử), sau đó nối phần tử đó vào một phần tử hiện có.
Thí dụ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
Giải thích ví dụ
Mã này tạo một <p>phần tử mới:
const para = document.createElement("p");
Để thêm văn bản vào <p>phần tử, trước tiên bạn phải tạo một nút văn bản. Mã này tạo một nút văn bản:
const node = document.createTextNode("This is a new paragraph.");
Sau đó, bạn phải nối nút văn bản vào <p>phần tử:
para.appendChild(node);
Cuối cùng, bạn phải nối phần tử mới vào một phần tử hiện có.
Mã này tìm thấy một phần tử hiện có:
const element = document.getElementById("div1");
Mã này nối phần tử mới vào phần tử hiện có:
element.appendChild(para);
Tạo phần tử HTML mới - insertBefore ()
Phương appendChild()thức trong ví dụ trước, đã thêm phần tử mới làm phần tử con cuối cùng của phần tử gốc.
Nếu bạn không muốn, bạn có thể sử dụng insertBefore()phương pháp:
Thí dụ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Xóa các phần tử HTML hiện có
Để xóa một phần tử HTML, hãy sử dụng remove()
phương pháp:
Thí dụ
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
Giải thích ví dụ
Tài liệu HTML chứa một <div>phần tử có hai nút con (hai <p>
phần tử):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Tìm phần tử bạn muốn xóa:
const elmnt = document.getElementById("p1");
Sau đó thực thi phương thức remove () trên phần tử đó:
elmnt.remove();
Phương remove()pháp này không hoạt động trong các trình duyệt cũ hơn, hãy xem ví dụ bên dưới về cách sử dụng
removeChild()thay thế.
Xóa nút con
Đối với các trình duyệt không hỗ trợ remove()phương thức này, bạn phải tìm nút cha để xóa một phần tử:
Thí dụ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
Giải thích ví dụ
Tài liệu HTML này chứa một <div>phần tử có hai nút con (hai <p>
phần tử):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Tìm phần tử có id="div1":
const parent = document.getElementById("div1");
Tìm <p>phần tử có id="p1":
const child = document.getElementById("p1");
Xóa con khỏi cha mẹ:
parent.removeChild(child);
Đây là một giải pháp phổ biến: Tìm con bạn muốn xóa và sử dụng
thuộc tính của nó parentNodeđể tìm cha mẹ:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Thay thế các phần tử HTML
Để thay thế một phần tử thành HTML DOM, hãy sử dụng replaceChild()phương pháp:
Thí dụ
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>