Document: createElement() 方法

在 HTML 文档中，document.createElement() 方法创建由 tagName 指定的 HTML 元素，如果 tagName 未被识别，则创建 HTMLUnknownElement。

语法

js
createElement(tagName)
createElement(tagName, options)

参数

tagName

指定要创建的元素类型的字符串。创建的元素的 nodeName 使用 tagName 的值进行初始化。不要在此方法中使用限定名称（如“html:a”）。在 HTML 文档上调用时，createElement() 会在创建元素之前将 tagName 转换为小写。在 Firefox、Opera 和 Chrome 中，createElement(null) 的工作方式与 createElement("null") 相同。

options 可选

具有以下属性的对象

is

先前通过 customElements.define() 定义的自定义元素的标签名称。有关更多详细信息，请参阅 Web 组件示例。

返回值

新的 Element。

注意：如果文档是 HTMLDocument（最常见的情况），则返回一个新的 HTMLElement。否则，返回一个新的 Element。

示例

基本示例

这将创建一个新的 <div> 并将其插入到 ID 为“div1”的元素之前。

HTML

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elements</title>
  </head>
  <body>
    <div id="div1">The text above has been created dynamically.</div>
  </body>
</html>

JavaScript

js
document.body.onload = addElement;

function addElement() {
  // create a new div element
  const newDiv = document.createElement("div");

  // and give it some content
  const newContent = document.createTextNode("Hi there and greetings!");

  // add the text node to the newly created div
  newDiv.appendChild(newContent);

  // add the newly created element and its content into the DOM
  const currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

结果

Web 组件示例

注意：请查看 浏览器兼容性 部分以了解支持情况，以及 is 属性参考以了解自定义内置元素实现现实中的注意事项。

以下示例代码段取自我们的 expanding-list-web-component 示例（也可以在线查看）。在本例中，我们的自定义元素扩展了 HTMLUListElement，它表示 <ul> 元素。

js
// Create a class for the element
class ExpandingList extends HTMLUListElement {
  constructor() {
    // Always call super first in constructor
    super();

    // constructor definition left out for brevity
    // …
  }
}

// Define the new element
customElements.define("expanding-list", ExpandingList, { extends: "ul" });

如果我们想以编程方式创建此元素的实例，我们将使用以下代码行进行调用

js
let expandingList = document.createElement("ul", { is: "expanding-list" });

新元素将获得一个 is 属性，其值为自定义元素的标签名称。

注意：为了与 自定义元素规范 的先前版本保持向后兼容性，某些浏览器允许您在此处传递字符串而不是对象，其中字符串的值为自定义元素的标签名称。

规范

规范
DOM 标准
# ref-for-dom-document-createelement①

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅