Phương thức appendChild() trong HTML DOM

Phương thức appendChild() trong HTML DOM được sử dụng để tạo và thêm một text node vào cuối danh sách các node con. Phương thức này cũng có thể được dùng để di chuyển một phần tử từ vị trí hiện tại sang vị trí mới. Sử dụng appendChild() bạn có thể thêm giá trị mới vào danh sách và thậm chí thêm một đoạn văn mới dưới một đoạn văn khác.

Cú pháp

Cú pháp cho phương thức appendChild():

node.appendChild( node )

Ở đây, tham số node là đối tượng bạn muốn thêm vào. Đây là tham số bắt buộc.

Ví dụ

Dưới đây là ví dụ về phương thức appendChild():

<!DOCTYPE html> <html> <body> <p>Click nút để tạo một đoạn văn và thêm nó vào div</p> <div id="SampleDIV"> Một phần tử DIV </div> <button onclick="AppendP()">Thêm</button> <script>    var x=1;    function AppendP() {       var paragraph = document.createElement("P");       paragraph.innerHTML = "Đây là đoạn văn "+x;       document.getElementById("SampleDIV").appendChild(paragraph);       x++;    } </script> </body> </html>

Kết quả

Ví dụ này sẽ cho kết quả sau:

Sau khi click Thêm 3 lần:

Giải thích ví dụ:

Chúng ta đã tạo một div với id “SampleDIV”. Node được thêm sẽ đóng vai trò là node con của div này.

<div id="SampleDIV"> Một phần tử DIV </div>

Sau đó có một nút tên “Thêm” sẽ thực thi hàm AppendP():

<button onclick="AppendP()">Thêm</button>

Hàm AppendP() trước tiên tạo một phần tử đoạn văn (p) và gán cho biến paragraph. Sau đó thêm một số văn bản vào paragraph sử dụng innerHTML và biến x được nối vào văn bản. Biến này tăng lên mỗi khi click nút “Thêm”. Cuối cùng thêm đoạn văn mới tạo làm node con của phần tử div:

var x=1; function AppendP() {    var paragraph = document.createElement("P");    paragraph.innerHTML = "Đây là đoạn văn "+x;    document.getElementById("SampleDIV").appendChild(paragraph);    x++; }