JavaScript HTML DOM yếu tố (nút)

Thêm và xóa nút (phần tử HTML)

Tạo phần tử HTML mới (nút)

Để thêm mới một phần tử mới vào HTML DOM, bạn phải trước tiên tạo phần tử này (nút phần tử), sau đó thêm nó vào phần tử đã có.

Mô hình

<div id="div1">
<p id="p1">Đây là đoạn văn bản.</p>
<p id="p2">Đây là đoạn văn bản khác.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Đây là văn bản mới.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

Thử ngay

ví dụ minh họa

Mã này tạo một phần tử mới <p> thuộc tính:

var para = document.createElement("p");

Để thêm <p> Để thêm văn bản vào phần tử, bạn phải tạo trước tiên một nút văn bản. Mã này tạo một nút văn bản:

var node = document.createTextNode(" Đây là đoạn văn bản mới.");

Sau đó bạn cần thêm <p> Thêm phần tử này vào phần tử:

para.appendChild(node);

Cuối cùng bạn cần thêm phần tử mới này vào phần tử đã có.

Mã này tìm kiếm một phần tử đã có:

var element = document.getElementById("div1");

Mã này thêm phần tử mới vào phần tử đã có:

element.appendChild(para);

Tạo phần tử HTML mới - insertBefore()

Trong ví dụ trước đó appendChild() phương thức, thêm phần tử mới làm con cuối cùng của cha.

Ngoài ra bạn còn có thể sử dụng insertBefore() Phương pháp:

Mô hình

<div id="div1">
<p id="p1">Đây là đoạn văn bản.</p>
<p id="p2">Đây là đoạn văn bản khác.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Đây là văn bản mới.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Thử ngay

xóa phần tử HTML đã có

Để xóa phần tử HTML, hãy sử dụng remove() Phương pháp:

Mô hình

<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>

Thử ngay

ví dụ minh họa

Tài liệu HTML này chứa một phần tử với hai nút con (hai <p> thuộc tính) của <div> thuộc tính:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

Tìm phần tử cần xóa:

const elmnt = document.getElementById("p1");

Sau đó thực hiện remove() Phương pháp:

elmnt.remove();

Lưu ý:Phương thức remove() không hoạt động trên trình duyệt cũ, hãy xem ví dụ dưới đây để hiểu cách sử dụng removeChild()。

xóa nút con

cho trình duyệt không hỗ trợ remove() Phương pháp này trên trình duyệt, bạn phải tìm nút cha để xóa một phần tử:

Mô hình

<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>

Thử ngay

ví dụ minh họa

Tài liệu HTML này chứa một phần tử với hai nút con (hai <p> thuộc tính) của <div> thuộc tính:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

tìm id="div1" thuộc tính:

const parent = document.getElementById("div1");

tìm id="p1" của <p> thuộc tính:

const child = document.getElementById("p1");

Xóa con khỏi phần tử cha:

parent.removeChild(child);

Đây là phương pháp giải quyết phổ biến: tìm nút con cần xóa và sử dụng parentNode Tính chất tìm nút cha:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

Thay thế phần tử HTML

Để thay thế phần tử, hãy sử dụng replaceChild() Phương pháp:

Mô hình

<div id="div1">
<p id="p1">Đây là đoạn văn bản.</p>
<p id="p2">Đây là đoạn văn bản khác.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Đây là văn bản mới.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Thử ngay