JavaScript append() メソッド

概要: このチュートリアルでは、JavaScript の append() メソッドを使用して、親ノードの最後の 자식 뒤에 Node オブジェクトまたは DOMString オブジェクトのセットを挿入する方法を学習します。

JavaScript append() メソッドの概要

parentNode.append() メソッドは、親ノードの最後の 자식 뒤에 Node オブジェクトまたは DOMString オブジェクトのセットを挿入します。

parentNode.append(...nodes);
parentNode.append(...DOMStrings);Code language: JavaScript (javascript)

append() メソッドは、DOMString オブジェクトを Text ノードとして挿入します。

DOMString は、文字列に直接マッピングされる UTF-16 文字列であることに注意してください。

append() メソッドは戻り値を持ちません。つまり、append() メソッドは暗黙的に undefined を返します。

JavaScript append() メソッドの例

append() メソッドを使用する例をいくつか見てみましょう。

1) append() メソッドを使用して要素を追加する例

次の ul 要素があるとします。

<ul id="app">
    <li>JavaScript</li>
</ul>Code language: HTML, XML (xml)

次の例は、li 要素のリストを作成し、それらを ul 要素に追加する方法を示しています。

let app = document.querySelector('#app');

let langs = ['TypeScript','HTML','CSS'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.append(...nodes);Code language: JavaScript (javascript)

出力 HTML

<ul id="app">
    <li>JavaScript</li>
    <li>TypeScript</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>Code language: HTML, XML (xml)

仕組み

• まず、querySelector() メソッドを使用して、id で ul 要素を選択します。
• 次に、言語の配列を宣言します。
• 3つ目に、各言語について、textContent が言語に割り当てられた新しい li 要素を作成します。
• 最後に、append() メソッドを使用して、li 要素を ul 要素に追加します。

2) append() メソッドを使用して要素にテキストを追加する例

次の HTML があるとします。

<div id="app"></div>Code language: HTML, XML (xml)

append() メソッドを使用して、要素にテキストを追加できます。

let app = document.querySelector('#app');
app.append('append() Text Demo');

console.log(app.textContent);Code language: JavaScript (javascript)

出力 HTML

<div id="app">append() Text Demo</div>Code language: HTML, XML (xml)

append vs. appendChild()

次の表は、append() メソッドと appendChild() メソッドの違いを示しています。

まとめ

• parentNode.append() メソッドを使用して、parentNode の最後の 자식 ノードの後に Node オブジェクトまたは DOMString オブジェクトのセットを追加します。

クイズ