Document.createElement()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

In an HTML document, the document.createElement() method creates the HTML element specified by tagName ，或 HTMLUnknownElement if tagName isn't recognized.

句法

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

参数

tagName: A string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName . Don't use qualified names (like "html:a") with this method. When called on an HTML document, createElement() converts tagName to lower case before creating the element. In Firefox, Opera, and Chrome, createElement(null) works like createElement("null") .
选项 可选: An optional ElementCreationOptions object, containing a single property named is , whose value is the tag name of a custom element previously defined via customElements.define() 。见 Web component example 了解更多细节。

返回值

新的 元素 .

范例

基本范例

This creates a new <div> and inserts it before the element with the 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
  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 component example

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> 元素。

// 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" });

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.

注意 : 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.

规范

规范	状态	注释
DOM The definition of 'Document.createElement' in that specification.	实时标准

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`createElement`	Chrome 1	Edge 12	Firefox 1 1 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 5	Opera 6	Safari 1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0
`选项` 参数	Chrome Yes Yes For backwards compatibility, the `选项` argument can be an object or a string with the custom element tag name, although the string version is deprecated.	Edge 79 79 For backwards compatibility, the `选项` argument can be an object or a string with the custom element tag name, although the string version is deprecated.	Firefox 50 50 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	Opera Yes Yes For backwards compatibility, the `选项` argument can be an object or a string with the custom element tag name, although the string version is deprecated.	Safari No	WebView Android Yes Yes For backwards compatibility, the `选项` argument can be an object or a string with the custom element tag name, although the string version is deprecated.	Chrome Android Yes Yes For backwards compatibility, the `选项` argument can be an object or a string with the custom element tag name, although the string version is deprecated.	Firefox Android 50 50 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 Yes Yes For backwards compatibility, the `选项` argument can be an object or a string with the custom element tag name, although the string version is deprecated.	Safari iOS No	Samsung Internet Android Yes Yes For backwards compatibility, the `选项` argument can be an object or a string with the custom element tag name, although the string version is deprecated.

图例

完整支持
不支持

另请参阅

Node.removeChild()
Node.replaceChild()
Node.appendChild()
Node.insertBefore()
Node.hasChildNodes()
document.createElementNS() — to explicitly specify the namespace URI for the element.

元数据

最后修改： Aug 25, 2020

在此页

句法

参数

返回值

范例