Đối tượng Tiêu đề DOM HTML được liên kết với các phần tử tiêu đề HTML từ

đến

. Sử dụng đối tượng tiêu đề, chúng ta có thể tạo và truy cập phần tử tiêu đề bằng phương thức createElement () và getElementById () tương ứng.

Cú pháp

Sau đây là cú pháp cho -

Tạo đối tượng Heading -

var p = document.createElement("H1");

Ví dụ

Chúng ta hãy xem một ví dụ cho đối tượng Heading -

<!DOCTYPE html>
<html>
<body>
<h1>Heading object example</h1>
<p>Create a h1 element by clicking the below button</p>
<button onclick="createH1()">CREATE</button>
<script>
   function createH1() {
      var h = document.createElement("H1");
      var txt = document.createTextNode("H1 element has been created");
      h.appendChild(txt);
      document.body.appendChild(h);
   }
</script>
</body>
</html>

Đầu ra

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

Đối tượng tiêu đề HTML DOM

Khi nhấp vào nút TẠO -

Đối tượng tiêu đề HTML DOM

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một nút CREATE sẽ thực thi phương thức headerCreate () khi người dùng nhấp vào -

<button onclick="createH1()">CREATE</button>

Phương thức CreateH1 () 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 đó, chúng tôi tạo 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 nội dung tài liệu bằng phương thức appendChild () -

function createH1() {
   var h = document.createElement("H1");
   var txt = document.createTextNode("H1 element has been created");
   h.appendChild(txt);
   document.body.appendChild(h);
}