Để thêm phần tử mới vào HTML DOM , chúng ta phải tạo nó trước và sau đó chúng ta cần nối nó vào phần tử hiện có.
Các bước cần làm theo
1) Trước tiên, hãy tạo phần div và thêm một số văn bản vào nó bằng cách sử dụng thẻ
2) Tạo phần tử
3) Tạo văn bản, sử dụng document.createTextNode () , để chèn nó vào phần tử được tạo ở trên ("p").
4) Sử dụng appendChild () cố gắng nối phần tử đã tạo, cùng với văn bản, vào div hiện có thẻ.
Do đó, một phần tử mới được tạo (
) và được nối vào phần tử hiện có (
).
Ví dụ
Trong ví dụ sau, ban đầu là div phần chỉ bao gồm 2 văn bản. Nhưng sau đó, một văn bản khác được tạo và thêm vào phần div như được hiển thị trong đầu ra.
<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> Đầu ra
Tutorix Tutorialspoint Tutorix is the best e-learning platform