Cách thêm phần tử mới vào HTML DOM trong JavaScript

Để thêm phần tử mới vào HTML DOM, phải tạo trước rồi gắn (append) vào phần tử hiện có.

Các bước thực hiện

1) Tạo div và thêm văn bản bằng thẻ <p>.

2) Tạo phần tử <p> bằng document.createElement("p").

3) Tạo nút văn bản bằng document.createTextNode() để chèn vào phần tử vừa tạo.

4) Dùng appendChild() gắn phần tử mới (kèm văn bản) vào div hiện có.

Như vậy phần tử mới (<p>) được tạo và gắn vào phần tử hiện có (<div>).

Ví dụ

Ban đầu div chỉ có 2 văn bản. Sau đó tạo thêm một văn bản và thêm vào div như kết quả.

<html> <body> <div id="new"> <p id="p1">Tutorix</p> <p id="p2">Tutorialspoint</p> </div> <script> 
    var tag = document.createElement("p"); 
    var text = document.createTextNode("Tutorix is the best e-learning platform"); 
    tag.appendChild(text); 
    var element = document.getElementById("new"); 
    element.appendChild(tag); 
</script> </body> </html>

Kết quả

Tutorix Tutorialspoint Tutorix is the best e-learning platform