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

以下示例片段取自我们的 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说明文档: 创建元素的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 1
Notes
Full support 1
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 6Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 79
Notes
Full support 79
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 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.

参考