Document.createElement()

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 文档仔细了解如何使用该参数。

返回值

新建的元素(Element)。

示例

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 示例

The following example snippet is taken from our expanding-list-web-component example (see it live also). In this case, our custom element extends the HTMLUListElement, which represents the <ul> element.

// 为新元素创建一个类
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" });

If we wanted to create an instance of this element programmatically, we'd use a call along the following lines:

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

The new element will be given an is attribute whose value is the custom element's tag name.

Note: For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.

注意

  • 在一个 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说明文档: 创建元素的localNamenamespaceURI不会被设置为null. 更多细节详见 bug 280692

规范

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
createElementChrome Full support 1Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element.
IE Full support 5Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
options parameterChrome Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge No support NoFirefox Full support 50
Notes
Full support 50
Notes
Notes Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
IE No support NoOpera Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari No support NoWebView Android Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Firefox Android Full support 50
Notes
Full support 50
Notes
Notes Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari iOS No support NoSamsung Internet Android Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

参考