HTML DOM createElement()用法及代码示例

HTML DOM createElement() 方法用于使用 JavaScript 动态创建 HTML 元素。它将元素名称作为参数并创建该元素节点。您需要使用 appendChild() 方法将新创建的元素作为 DOM 的一部分。

用法

以下是 createElement() 方法的语法 -

document.createElement(nodename)

示例

让我们看一个 createElement() 方法的例子 -

<!DOCTYPE html>
<html>
<body>
<h1>createElement() example</h1>
<p>Click the below button to create more buttons</p>
<button onclick="createButton()">CREATE</button>
<br><br>
<script>
   var i=0;
   function createButton() {
      i++;
      var btn = document.createElement("BUTTON");
      btn.innerHTML="BUTTON"+i;
      var br= document.createElement("BR");
      document.body.appendChild(btn);
      document.body.appendChild(br);
   }
</script>
</body>
</html>

输出

这将产生以下输出 -

单击 CREATE 按钮三次。一键一键 -

在上面的例子中 -

我们创建了一个按钮 CREATE，它将在用户单击时执行 createButton() 方法。

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

createButton() 函数使用文档对象的 createElement() 方法创建一个 <button> 元素。使用innerHTML，我们设置将显示在按钮顶部的文本。我们使用文档对象的 createElement() 方法创建另一个元素 <br>。 <button> 元素和 <br> 元素然后使用 appendChild() 方法附加到文档正文 -

var i=0;
function createButton() {
   i++;
   var btn = document.createElement("BUTTON");
   btn.innerHTML="BUTTON"+i;
   var br= document.createElement("BR");
   document.body.appendChild(btn);
   document.body.appendChild(br);
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM createElement() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。