Các phần tử (node) HTML DOM trong JavaScript

Thêm và xóa các node (các phần tử HTML).

Tạo các phần tử HTML mới (node)

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

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

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

Giải thích ví dụ

Mã này tạo ra một phần tử <p> mới:

var para = document.createElement(“p”);

Để thêm văn bản vào phần tử <p>, đầu tiên bạn phải tạo một node văn bản. Đoạn mã này tạo một nút văn bản:

var node = document.createTextNode(“This is a new paragraph.”);

Sau đó, bạn phải nối node văn bản với phần tử <p>:

para.appendChild(node);

Cuối cùng, bạn phải gắn thêm 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ó:

var element = document.getElementById(“div1”);

Mã này nối thêm phần tử mới vào phần tử hiện tại:

element.appendChild(para);

Tạo các phần tử HTML mới – insertBefore()

Phương thức appendChild() trong ví dụ trước, nối thành phần tử mới làm child cuối cùng của parent. Nếu không muốn bạn có thể sử dụng phương thức insertBefore():

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

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Loại bỏ các phần tử HTML hiện có

Để loại bỏ một phần tử HTML, bạn phải biết parent của phần tử:

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

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

Phương pháp node.remove () được thực hiện trong đặc tả DOM 4. Nhưng vì hỗ trợ trình duyệt kém, bạn không nên sử dụng nó.

Giải thích ví dụ

Tài liệu HTML này chứa một phần tử <div> có hai node 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”:

var parent = document.getElementById(“div1”);

Tìm phần tử <p> có id = “p1”:

var child = document.getElementById(“p1”);

Loại bỏ child khỏi parent:

parent.removeChild(child);

Tốt nhất để có thể loại bỏ một phần tử mà không đề cập đến parent. Tuy nhiên DOM cần biết cả phần tử bạn muốn xóa và phần tử của nó.

var child = document.getElementById(“p1”);
child.parentNode.removeChild(child);

Thay thế phần tử HTML

Để thay thế một phần tử cho HTML DOM, sử dụng phương thức replaceChild():

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

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>