Đối tượng HTML DOM Heading

Đối tượng Heading trong HTML DOM đại diện cho các phần tử tiêu đề từ <h1> đến <h6>. Bạn có thể tạo và truy xuất phần tử tiêu đề bằng createElement() và getElementById().

Cú pháp

Tạo đối tượng Heading (ví dụ h1):

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

Ví dụ

Ví dụ tạo động một phần tử <h1> khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
<h1>Ví dụ đối tượng Heading</h1>
<p>Nhấn nút để tạo phần tử h1</p>
<button onclick="createH1()">TẠO</button>
<script>
  function createH1() {
    var h = document.createElement("H1");
    var txt = document.createTextNode("Phần tử H1 đã được tạo");
    h.appendChild(txt);
    document.body.appendChild(h);
  }
</script>
</body>
</html>

Kết quả

Ban đầu chỉ có tiêu đề, đoạn văn và nút "TẠO".

Sau khi nhấn nút, một tiêu đề <h1> mới xuất hiện với nội dung "Phần tử H1 đã được tạo".

Giải thích

• Nút "TẠO" gọi hàm createH1().
• Hàm tạo <h1> qua createElement("H1"), gán vào biến h.
• Tạo nút văn bản "Phần tử H1 đã được tạo" qua createTextNode().
• Gắn nút văn bản vào <h1> bằng appendChild().
• Gắn <h1> vào body tài liệu.