From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/document/createelement/index.html | 147 +++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 files/zh-cn/web/api/document/createelement/index.html (limited to 'files/zh-cn/web/api/document/createelement') diff --git a/files/zh-cn/web/api/document/createelement/index.html b/files/zh-cn/web/api/document/createelement/index.html new file mode 100644 index 0000000000..a0b1fecfad --- /dev/null +++ b/files/zh-cn/web/api/document/createelement/index.html @@ -0,0 +1,147 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - 参考 + - 方法 +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 {{domxref("HTMLUnknownElement")}}。

+ +

语法

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

参数

+ +
+
tagName
+
指定要创建元素类型的字符串,创建元素时的 {{domxref("Node.nodeName", "nodeName")}} 使用 tagName 的值为初始化，该方法不允许使用限定名称(如:"html:a")，在 HTML 文档上调用 createElement() 方法创建元素之前会将tagName 转化成小写，在 Firefox、Opera 和 Chrome 内核中，createElement(null) 等同于 createElement("null")
+
options{{optional_inline}}
+
一个可选的参数 ElementCreationOptions 是包含一个属性名为 is 的对象，该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 Custom Elements specification, 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 {{anch("Web component example")}} Google 的 Extending native HTML elements 文档仔细了解如何使用该参数。
+
+ +

返回值

+ +

新建的元素（{{domxref("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);
+}
+
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

Web component 示例

+ +

以下示例片段取自我们的 expanding-list-web-component 示例(实时查看)。 在这个案例中， 我们的自定义元素继承了以 {{htmlelement("ul")}} 元素为代表的 {{domxref("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 规范，某些浏览器将允许您在此处传递字符串而不是对象，其中字符串的值是自定义元素的标记名。

+
+ +

注意

+ + + +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.Document.createElement")}}

+ +

参考

+ + -- cgit v1.2.3-54-g00ecf