HTML - DOM createElement() 方法

HTML DOM 的createElement() 方法用于创建由标签名称或元素名称指定的 HTML 元素，如果标签名称不被识别，则会创建一个 HTML 未知元素。

以下交互式示例演示了createElement() 方法在不同场景下的用法：

HTML DOM createElement() 方法

欢迎来到 Tutorialspoint

您来对地方学习了……访问了解更多

如果您点击“创建 p 元素”按钮，将创建一个新的<p>元素。
如果您点击“创建列表”按钮，将创建一个新的“列表”元素。
如果您点击“创建按钮元素”按钮，将创建一个新的“按钮”元素。

语法

以下是 HTML DOM 的createElement() 方法的语法：

document.createElement(tagname);

参数

此方法接受一个参数，如下所示：

参数	描述
tagname	这是一个必需参数，表示要创建的元素类型。

返回值

它返回新创建的元素节点。

示例 1：创建“按钮”和“hr”元素

以下示例演示了 HTML DOM 的createElement() 方法的用法。它在文档中创建“按钮”和“hr”元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>Click to get more buttons</p>
<button onclick="fun()">Click me</button><br><br>
<script>
   let i = 0;
   function fun() {
      i++;
      let btn = document.createElement("button");
      btn.innerHTML = "button" + i;
      let hr = document.createElement("hr");
      document.body.appendChild(btn);
      document.body.appendChild(hr);
   }
</script>
</body>
</html>

示例 2：创建段落 (“p”) 元素

以下是 HTML DOM 的createElement() 方法的另一个示例。我们使用此方法创建一个“p”元素，然后将其附加到<body>：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
   <p>Click to get more Paragraphs</p>
   <button onclick="fun()">Click me</button><br><br>
   <script>
      let i = 0;
      function fun() {
         i++;
         let txt = document.createElement("p");
         txt.innerHTML = "I am Paragraph number " + i;
         document.body.appendChild(txt);
      }
   </script>
</body>
</html>

示例 3：创建段落 (“p”) 元素并附加到<div>

在以下示例中，使用createElement() 方法创建了一个<p>元素，然后将其附加到<div>元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>Click to get more Paragraphs</p>
<button onclick="fun()">Click me</button><br><br>
<div id="ids"></div>
<script>
   let i = 0;
   function fun() {
      i++;
      let txt = document.createElement("p");
      txt.innerHTML = "I am Paragraph number " + i;
      document.getElementById("ids").appendChild(txt);
   }
</script>
</body>
</html>

支持的浏览器

方法
createElement()	是 1	是 12	是 1	是 1	是 6

html_dom_document_reference.htm

打印页面