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

Phương thức HTML DOM appendChild () được sử dụng để tạo và thêm một nút văn bản vào cuối danh sách các nút con. Phương thức appendChild () cũng có thể được sử 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 các giá trị mới vào danh sách và thậm chí có thể thêm một đoạn mới dưới một đoạn khác.

Cú pháp

Sau đây là cú pháp cho phương thức appendChild () -

node.appendChild( node )

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

Ví dụ

Hãy để chúng tôi xem một ví dụ về phương thức appendChild () -

<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a paragraph and append it to the div</p>
<div id="SampleDIV">
A DIV element
</div>
<button onclick="AppendP()">Append</button>
<script>
   var x=1;
   function AppendP() {
      var paragraph = document.createElement("P");
      paragraph.innerHTML = "This is paragraph "+x;
      document.getElementById("SampleDIV").appendChild(paragraph);
      x++;
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

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

Sau khi nhấp thêm 3 lần:-

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

Trong ví dụ trên -

Chúng tôi đã tạo một div với id "SampleDIV". Nút được nối thêm sẽ hoạt động như con của div này.

<div id="SampleDIV">
A DIV element
</div>

Sau đó, chúng tôi có một nút có tên “Nối” sẽ thực thi hàm AppendP ()

<button onclick="AppendP()">Append</button>

Trước tiên, hàm AppendP () tạo một phần tử đoạn (p) và gán nó cho đoạn biến. Sau đó, một số văn bản được thêm vào đoạn văn bằng innerHTML và một biến x được nối vào văn bản. Biến này được tăng lên mỗi khi chúng ta nhấp vào nút "Nối". Cuối cùng, chúng tôi nối đoạn mới tạo làm nút con của phần tử div -

var x=1;
function AppendP() {
   var paragraph = document.createElement("P");
   paragraph.innerHTML = "This is paragraph "+x;
   document.getElementById("SampleDIV").appendChild(paragraph);
   x++;
}