DOM

：

：

Element.append() メソッド

　編集：2022.09.20 by T.A.

[Edge]。→

element の最後の子ノードとして、指定の Node や DOMString オブジェクトを挿入します。

DOMString オブジェクトは等価な Text ノードとして挿入されます。

Node.appendChild() との違いは次の通りです。

構文
element.append(...nodesOrDOMStrings)
element Element オブジェクト。
nodesOrDOMStrings 挿入する Node または DOMString オブジェクトです。複数ある場合はカンマ「,」で区切って指定します。¶Element もできるようですが、実質同じでしょう。
例外
HierarchyRequestError
ノードを階層の特定の位置に挿入することができません。
例
要素の追加
let div = document.createElement("div")
let p = document.createElement("p")
div.append(p)

console.log(div.childNodes) // NodeList [ <p> ]
テキストの追加
let div = document.createElement("div")
div.append("Some text")

console.log(div.textContent) // "Some text"
要素とテキストの追加
let div = document.createElement("div")
let p = document.createElement("p")
div.append("Some text", p)

console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]

¶省く

HTML： 

<SPAN id=IdTest style="color:red">[SPAN要素]</SPAN>
[SPAN要素]

JavaScript： 

E=document.createElement('em'); //EM要素を生成する。
E.innerText="[EM要素]";         //EM要素の中身の指定。
IdTest.append(E, "テキスト");   //SPAN要素の最後の子ノードとして組み込む。

表示結果：

[SPAN要素][EM要素]テキスト 
D=IdTest.outerHTML //＝[string]：<span id="IdTest" style="color:red">[SPAN要素]<em>[EM要素]</em>テキスト</span>
テスト