Document.createElement()

 

在一个 HTML 文档中， Document.createElement() 方法创建由tagName 或一个HTMLUnknownElement 如果tagName不被识别, 指定的HTML元素。

在一个 XUL 文档中，它创建指定的XUL元素。在其他文档中，它创建一个具有null命名空间URI的元素。

要显式指定元素的命名空间URI，请使用 document.createElementNS()。

语法

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

参数

tagName
指定要创建元素类型的字符串,创建元素时的nodeName使用tagName的值为初始化,该方法不接受使用限定名称(如:"html:a"),在HTML文档上调用createElement()方法创建元素之前会将tagName转化成小写,在Firefox, Opera 和 Chrome内核中. createElement(null) 等同于 createElement("null")
options可选
An optional ElementCreationOptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.define(). 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. See Extending native HTML elements for more information on how to use this parameter.
The new element will be given an is attribute whose value is the custom element's tag name. Custom elements are an experimental feature only available in some browsers.

Return value

The new Element.

  • element 是创建的Element对象。
  • tagName 指定将要创建的元素类型的字符串。创建的element的nodeName会被初始化为tagName的值。该方法不接受带条件的元素名字(例如: html:a)。
  • options 是一个可选的 ElementCreationOptions 对象. 如果这个对象被定义并赋予了一个 is 特性，则创建的element的 is 属性会被初始化为这个特性的值. 如果这个对象没有 is 特性，则值为空.

示例

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

HTML

<!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 () {
  // create a new div element
  // and give it some content
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("Hi there and greetings!");
  newDiv.appendChild(newContent); //add the text node to the newly created div.
  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

注意

  • 当在一个被标记为HTML文档的文档对象上执行时，createElement()优先将参数转换为小写。
  • 当创建一个带限制条件的元素时，请使用document.createElementNS()。
  • Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)之前,quirks模式下tagName可以包含尖括号(<和>)；从Gecko2.0开始，该方法在quirks模式和标准模式下表现一致。
  • 从Gecko19.0开始， 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。
  • is 属性是  Custom Elements W3C Working Draft 的一部分， 同时， 该属性是一个只在部分浏览器上可用的试验性特性。

标准

参考

文档标签和贡献者