Các phần tử DOM HTML HTML (Nút)
Thêm và xóa nút (Phần tử HTML)
Tạo các 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 nó vào phần tử hiện có.
Ví 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>
Hãy tự mình thử »Ví dụ giải thích
Mã này tạo một phần tử <p> mới:
const para = document.createElement("p");
Để thêm văn bản vào phần tử <p> , 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 phần tử <p> :
para.appendChild(node);
Cuối cùng, bạn phải nối phần tử mới vào 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 các phần tử HTML mới - InsertBefore()
Phương thứcappendChild appendChild() 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ử cha.
Nếu không muốn, bạn có thể sử dụng phương thức insertBefore() :
Ví 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> Hãy tự mình thử »Xóa các phần tử HTML hiện có
Để xóa một phần tử HTML, hãy sử dụng phương thức remove() :
Ví 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> Hãy tự mình thử »Ví dụ giải thích
Tài liệu HTML chứa phần tử <div> với hai nút con (hai phần tử <p> ):
<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 thức remove() không hoạt động trong các trình duyệt cũ hơn, thay vào đó hãy xem ví dụ bên dưới về cách sử dụng removeChild() .
Xóa nút con
Đối với các trình duyệt không hỗ trợ phương thức remove() , bạn phải tìm nút cha để xóa một phần tử:
Ví 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> Hãy tự mình thử »Ví dụ giải thích
Tài liệu HTML này chứa phần tử <div> với hai nút con (hai phần tử <p> ):
<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 phần tử <p> có id="p1" :
const child = document.getElementById("p1");
Loại bỏ đứa trẻ khỏi cha mẹ:
parent.removeChild(child);
Đây là một cách giải quyết phổ biến: Tìm thành phần con mà bạn muốn xóa và sử dụng thuộc tính parentNode của nó để tìm thành phần con:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Thay thế các phần tử HTML
Để thay thế một phần tử vào HTML DOM, hãy sử dụng phương thức replaceChild() :
Ví 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> Hãy tự mình thử »