Document：createElement() 方法
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
Document 接口的 createElement() 方法用于创建一个具有指定 localName 的 HTMLElement。
如果 localName 无法被识别，该方法将创建一个 HTMLUnknownElement。
语法
createElement(localName)
createElement(localName, options)
参数
localName-
一个指定要创建的元素类型的字符串。不要使用限定名称（如“html:a”）调用此方法。在 HTML 文档上调用时，
createElement()会在创建元素之前将localName转换为小写。在 Firefox、Opera 和 Chrome 中，createElement(null)的效果与createElement("null")相同。 options可选-
一个包含以下可选属性的对象（注意，
is和customElementRegistry只能设置其中一个）：is可选-
一个定义先前使用
customElements.define()定义的自定义元素的标签名的字符串。新元素将被赋予is属性，其值为自定义元素的标签名。详见 Web component 示例。 customElementRegistry可选-
一个
CustomElementRegistry，用于设置自定义元素的域限自定义元素注册表。
返回值
新的 Element。
备注：如果文档是 HTMLDocument，则返回新的 HTMLElement，这是最常见的情况。否则返回新的 Element。
异常
InvalidCharacterErrorDOMException-
如果
localName值不是有效的元素名称，则抛出此异常。如果字符串长度至少为 1 且满足以下条件，则为有效的元素名称：- 以字母字符开头，且不包含 ASCII 空白字符、
NULL、/或>（分别为 U+0000、U+002F 或 U+003E）。 - 以
:（U+003A）、_（U+005F）或 U+0080 到 U+10FFFF 范围内的任何字符开头，并且其余码位仅包含这些相同的字符以及 ASCII 字母数字字符、-（U+002D）和.（U+002E）。
备注：早期版本的规定更为严格，要求
localName必须是有效的 XML 名称。 - 以字母字符开头，且不包含 ASCII 空白字符、
NotSupportedErrorDOMException-
如果同时指定了
is和customElementRegistry选项，则抛出此异常。
示例
基础示例
创建一个新的 <div> 并将其插入到 ID 为 div1 的元素之前。
HTML
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>操作元素</title>
</head>
<body>
<div id="div1">上面的文本是动态创建的。</div>
</body>
</html>
JavaScript
function addElement() {
// 创建一个新的 div 元素
const newDiv = document.createElement("div");
// 给它一些内容
const newContent = document.createTextNode("你好！欢迎使用！");
// 将文本节点添加到新创建的 div 元素中
newDiv.appendChild(newContent);
// 将新元素及其文本添加到 DOM 中
const currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
addElement();
Web component 示例
以下示例片段取自我们的 expanding-list-web-component 示例（实时查看）。在这个案例中，我们的自定义元素继承了以 <ul> 元素为代表的 HTMLUListElement。
// 为新元素创建一个类
class ExpandingList extends HTMLUListElement {
constructor() {
// 构造函数中始终首先调用 super
super();
// 构造函数定义省略
// …
}
}
// 定义新元素
customElements.define("expanding-list", ExpandingList, { extends: "ul" });
如果我们想以函数的方式创建此元素的实例，则可以使用以下方式调用：
const expandingList = document.createElement("ul", { is: "expanding-list" });
新元素将被赋予 is 属性，其值为自定义元素的标签名称。
备注：为了向后兼容，某些浏览器允许在此处传递字符串而不是对象，其中字符串的值是自定义元素的标签名。
规范
| Specification |
|---|
| DOM # ref-for-dom-document-createelement① |