JavaScript/添加元素
DOM 的 Document 接口提供了 - 除其他外 - 创建新元素的函数，包括它们的属性和内容，并将它们组合在一起或加入到现有的 DOM 中。
createElement() 创建一个元素。createAttribute() 创建一个属性，可以将其分配给这个新的或已经存在的元素。setAttribute() 创建一个属性并将其链接到一个现有的元素。appendChild() 将一个元素整合到另一个元素中。
// an <p> element
const p = document.createElement("p");
// its content
p.innerHTML = "The new paragraph.";
现在，元素及其内容已创建。但到目前为止，它们还不是 DOM 的一部分。它们只存在于 JavaScript 引擎的内存中。
要将它们整合到页面中，我们检索页面中现有的 body 或其他任何元素，并将新元素作为其最后一个元素附加。
const body = document.getElementById("body");
body.appendChild(p);
总而言之，HTML 加上 JavaScript 看起来像这样
<!DOCTYPE html>
<html>
<head>
<script>
function show() {
"use strict";
// an create an <p> element
const p = document.createElement("p");
// create its content
p.innerHTML = "The new paragraph.";
// integrate it into the body
const body = document.getElementById("body");
body.appendChild(p);
}
</script>
</head>
<body id="body" style="margin:2em">
<button id="buttonShow" onclick="show()">Start</button>
</body>
</html>
原始页面不包含段落。但是，在您单击按钮后，段落将被整合到页面中并可见。顺便说一句：您可以多次单击该按钮。会发生什么？
属性是使用 createAttribute() 或 setAttribute() 函数创建的。这两个函数中的第一个函数类似于上面显示的 createElement() 函数。它仅在内存中创建新属性，而没有与其他元素的连接。因为 setAttribute() 将新属性直接整合到元素中，所以我们使用此变体。
该示例使用 a 元素及其 href 属性。
// an <a> element
const anchor = document.createElement("a");
// its content
anchor.innerHTML = "The IANA example daomain.";
// its 'href' attribute
anchor.setAttribute("href", "https://www.example.com");
现在，元素、单个属性和元素的内容已创建。同样，我们将其整合到页面中，就像我们在上面所做的那样。
总而言之，HTML 加上 JavaScript 看起来像这样
<!DOCTYPE html>
<html>
<head>
<script>
function show() {
"use strict";
// an create an <a> element
const anchor = document.createElement("a");
// create its content
anchor.innerHTML = "The IANA example domain.";
// create its 'href' attribute
anchor.setAttribute("href", "https://www.example.com");
// see below: anchor.href = "https://www.example.com";
// integrate the element inclusive its attribute into the body
const body = document.getElementById("body");
body.appendChild(anchor);
/* now, the body looks like this:
<button id="buttonShow" onclick="show()">Start</button>
<a href="https://www.example.com">The IANA example domain.</a>
*/
}
</script>
</head>
<body id="body" style="margin:2em">
<button id="buttonShow" onclick="show()">Start</button>
</body>
</html>
原始页面不包含链接。但是，在您单击按钮后，指向 IANA 示例页面的链接将被整合到页面中并可用。
在 前面的页面 中解释了如何使用不同的语法更改属性。
element_name.attribute_name = "new value";
只需使用元素加上其属性名称，并将属性值分配给它即可。如果您将前面的示例更改为这种语法，您将获得相同的效果，即添加链接。
anchor.href = "https://www.example.com";
// instead of the above:
// anchor.setAttribute("href", "https://www.example.com");
显示的函数创建元素和属性。这些新对象可以组合在一起以创建更大的部分 - 当然是以嵌套的方式。它们可以加入到现有的 HTML 页面，即 DOM 树中。
const div = document.getElementById("div_1");
const anchor = document.createElement("a");
div.appendChild(anchor);
可以通过将新值分配给元素的 innerHTML 属性来更改元素的内容。如果此新值包含 HTML 片段的字符串表示形式，则分配将在元素内创建子节点。这是可能的，但不是使用 innerHTML 的预期方式。
const elem = document.getElementById("p1");
elem.innerHTML = "New text in the paragraph.<p>next P</p><p>and even one more P</p>";
..会导致..
<p id="p1">New text in the paragraph
<p>next P</p>
<p>and even one more P</p>
</p>
JavaScript 片段插入了另外两个段落，但不是在第一个段落之后。它们存在于第一个段落内。
过时的函数 document.write() 能够将新元素插入 HTML 页面。如今，强烈建议不要使用 它。