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 頁面。如今，強烈建議不要使用 它。