JavaScript insertBefore(): 既存のノードの前に新しいノードを挿入する

概要: このチュートリアルでは、JavaScriptのinsertBefore()メソッドを使用して、指定された親ノードの子ノードとして、あるノードの前に別のノードを挿入する方法を学びます。

JavaScript insertBefore() メソッドの紹介

親ノードの子ノードとして、あるノードの前に別のノードを挿入するには、parentNode.insertBefore()メソッドを使用します。

parentNode.insertBefore(newNode, existingNode);
Code language: CSS (css)

このメソッドでは

newNodeは、挿入される新しいノードです。
existingNodeは、新しいノードが挿入される前のノードです。existingNodeがnullの場合、insertBefore()はnewNodeをparentNodeの子ノードの末尾に挿入します。

insertBefore()は、挿入された子ノードを返します。

JavaScript insertBefore() ヘルパー関数

以下のinsertBefore()関数は、指定されたノードの前に新しいノードを挿入します。

function insertBefore(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode);
}
Code language: JavaScript (javascript)

JavaScript insertBefore() の例

次の項目のリストがあるとします。

<ul id="menu">
    <li>Services</li>   
    <li>About</li>
    <li>Contact</li>
</ul>
Code language: HTML, XML (xml)

次の例では、insertBefore()メソッドを使用して、新しいノードを最初のリスト項目として挿入します。

let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Home';

// insert a new node before the first list item
menu.insertBefore(li, menu.firstElementChild);Code language: JavaScript (javascript)

仕組み。

まず、getElementById()メソッドを使用して、menu要素を取得します。
次に、createElement()メソッドを使用して、新しいリスト項目を作成します。
3番目に、insertBefore()メソッドを使用して、menu要素の最初の子要素の前にリスト項目要素を挿入します。

すべてをまとめます。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScript insertBefore()</title>
</head>

<body>
    <ul id="menu">
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        // create a new li node
        let li = document.createElement('li');
        li.textContent = 'Home';

        // insert a new node before the first list item
        menu.insertBefore(li, menu.firstElementChild);
    </script>
</body>

</html>
Code language: HTML, XML (xml)

まとめ

parentNode.insertBefore()を使用して、親ノードの子ノードとして、既存のノードの前に新しいノードを挿入します。

このチュートリアルは役に立ちましたか？