HTML DOM 标题对象

HTML DOM 标题对象与从 <h1> 到 <h6> 的 HTML 标题元素相关联。使用标题对象，我们可以分别使用 createElement() 和 getElementById() 方法创建和访问标题元素。

语法

以下是语法 −

创建标题对象 −

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

示例

让我们来看一个标题对象的示例 −

<!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>

输出

这将产生以下输出 −

点击"创建"按钮 −

在上面的例子中 −

我们首先创建了一个 CREATE 按钮，当用户点击该按钮时，它将执行 headerCreate() 方法 −

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

CreateH1() 方法使用 document 对象上的 createElement() 方法创建一个 <h1> 标题元素，并将其赋值给变量 h。然后，我们使用 document 对象的 createTextNode() 方法为其创建一个文本节点。然后，使用 appendChild() 方法将该文本节点附加到 <h1> 元素。最后，使用 appendChild() 方法将 <h1> 元素和文本节点作为子元素附加到 document 的 body 元素中 −

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

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/