当前位置：文江博客知识库简体中文文档 DOM document.createElement

Document.createElement() - Web API 接口参考编辑

在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

语法

var element = document.createElement(tagName[, options]);

参数

tagName: 指定要创建元素类型的字符串,创建元素时的 nodeName 使用 tagName 的值为初始化，该方法不允许使用限定名称(如:"html:a")，在 HTML 文档上调用 createElement() 方法创建元素之前会将tagName 转化成小写，在 Firefox、Opera 和 Chrome 内核中，createElement(null) 等同于 createElement("null")
options可选: 一个可选的参数 ElementCreationOptions 是包含一个属性名为 is 的对象，该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 Custom Elements specification, 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 Web component example Google 的 Extending native HTML elements 文档仔细了解如何使用该参数。

示例

HTML

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

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

JavaScript

document.body.onload = addElement;

function addElement () {
  // 创建一个新的 div 元素
  let newDiv = document.createElement("div");
  // 给它一些内容
  let newContent = document.createTextNode("Hi there and greetings!");
  // 添加文本节点 到这个新的 div 元素
  newDiv.appendChild(newContent);

  // 将这个新的元素和它的文本添加到 DOM 中
  let currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

Web component 示例

以下示例片段取自我们的 expanding-list-web-component 示例(实时查看)。在这个案例中，我们的自定义元素继承了以 <ul> 元素为代表的 HTMLUListElement.

// 为新元素创建一个类
class ExpandingList extends HTMLUListElement {
  constructor() {
    // Always call super first in constructor
    super();

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

// 定义新元素
customElements.define('expanding-list', ExpandingList, { extends: "ul" });

如果我们想以函数的方式创建此元素的实例，则可以使用以下方式调用：

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

新元素将被赋予is属性，其值为自定义元素的标签名称。

Note: 为了兼容之前版本的 Custom Elements specification 规范，某些浏览器将允许您在此处传递字符串而不是对象，其中字符串的值是自定义元素的标记名。

注意

在一个 XUL 文档中，该方法创建指定的 XUL 元素。在其他文档中，它创建一个命名空间 URI 为 null 的元素，这时，新元素会继承文档的命名空间。
若要显式指定元素的命名空间 URI，请使用 document.createElementNS()。
当在一个被标记为HTML文档的文档对象上执行时，createElement()优先将参数转换为小写。
当创建一个带限制条件的元素时，请使用document.createElementNS()。
Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)之前,quirks模式下tagName可以包含尖括号(<和>)；从Gecko2.0开始，该方法在quirks模式和标准模式下表现一致。
从Gecko19.0(Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16)开始， createElement(null) 和 createElement("null") 相同。Opera 也会将 null 字符串化，但是 Chrome 和 IE 都会抛出错误。
从Gecko22.0(Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19)开始，当参数为"bgsounds", "multicol", 或"image"时， createElement() 不再使用 HTMLSpanElement 接口，参数为 "bgsound" 和 "multicol" 时，使用 HTMLUnknownElement ，为“image”时使用HTMLElement HTMLElement。
createElement 的Gecko实现不遵循XUL和XHTML的DOM说明文档: 创建元素的localName和namespaceURI不会被设置为null. 更多细节详见 bug 280692。

规范

规范	状态	备注
DOM Document.createElement	Living Standard

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.