Đối tượng tiêu đề HTML DOM được liên kết với phần tử HTML
Cú pháp
Sau đây là cú pháp cho -
Tạo đối tượng tiêu đề -
var p = document.createElement("HEADER"); Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho đối tượng tiêu đề HTML DOM -
<!DOCTYPE html>
<html>
<body>
<h1>Header object example</h1>
<p>Create a header element by clicking the below button</p>
<button onclick="headerCreate()">CREATE</button>
<script>
function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút TẠO -
Trong ví dụ trên -
Chúng tôi đã tạo một nút CREATE sẽ thực thi phương thức createHeader () khi người dùng nhấp vào -
<button onclick="headerCreate()">CREATE</button>
Phương thức headerCreate () tạo một phần tử tiêu đề bằng cách sử dụng phương thức createElement () trên đối tượng tài liệu và gán nó cho biến h. Sau đó, nó gọi phương thức appendChild () trên phần thân tài liệu để nối phần đầu dưới dạng phần tử con vào phần thân tài liệu. Sử dụng phương pháp tương tự ở trên, chúng tôi tạo một phần tử
và một nút văn bản cho nó bằng cách sử dụng phương thức createTextNode () của đối tượng tài liệu.
Nút văn bản được nối vào phần tử
bằng phương thức appendChild (). Cuối cùng phần tử cùng với nút văn bản được thêm vào dưới dạng phần tử con của phần tử tiêu đề bằng cách sử dụng phương thức appendChild () - function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
}
function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
}