JavaScript prepend() メソッド

概要: このチュートリアルでは、親ノードの最初の子ノードの前に`Node`オブジェクトまたは`DOMString`オブジェクトを挿入するJavaScriptの`prepend()`メソッドについて学習します。

JavaScript prepend() メソッド入門

`prepend()`メソッドは、親ノードの最初の子ノードの前に、`Node`オブジェクトまたは`DOMString`オブジェクトのセットを挿入します。

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

`prepend()`メソッドは、`DOMString`オブジェクトを`Text`ノードとして挿入します。`DOMString`は、文字列に直接マッピングされるUTF-16文字列であることに注意してください。

`prepend()`メソッドは`undefined`を返します。

JavaScript prepend() メソッドの例

`prepend()`メソッドの使用例をいくつか見てみましょう。

1) prepend() メソッドを使用して要素を先頭に追加する例

次のような`<ul>`要素があるとします。

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

この例では、`li`要素のリストを作成し、それらを`ul`要素の先頭に追加する方法を示します。

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

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

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

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

出力 HTML

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

仕組み

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

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

次のような要素があるとします。

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

`prepend()`メソッドを使用して上記の`<div>`要素にテキストを先頭に追加する方法を以下に示します。

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

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

出力 HTML

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

まとめ

• `parentNode.prepend()`メソッドを使用して、親ノードの最初の子ノードの前に`Node`オブジェクトまたは`DOMString`オブジェクトのリストを先頭に追加します。

クイズ