JavaScript insertAfter(): 既存のノードの前に新しいノードを挿入します。

概要: このチュートリアルでは、既存のノードの子ノードとして、新しいノードを既存のノードの後に挿入する方法を学びます。

このチュートリアルは、DOM API が after() メソッドをサポートしていなかったときに作成されました。現在では、after() メソッドを使用して、要素の後にノードを挿入できます。

JavaScript DOM は、新しいノードを既存のノードの子ノードとして、既存のノードの後に挿入できる insertBefore() メソッドを提供します。

既存のノードの子ノードとして、新しいノードを既存のノードの後に挿入するには、次のアプローチを使用できます。

まず、既存のノードの次の兄弟ノードを選択します。
次に、既存のノードの親ノードを選択し、親ノードで insertBefore() メソッドを呼び出して、その直近の兄弟ノードの前に新しいノードを挿入します。

次の insertAfter() 関数は、ロジックを示しています。

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

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

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

次は、最後のリスト項目の後に新しいノードを挿入します。

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

// insert a new node after the last list item
insertAfter(li,  menu.lastElementChild);Code language: JavaScript (javascript)

仕組み

まず、getElementById() メソッドを使用して、id（menu）で ul 要素を選択します。
次に、createElement() メソッドを使用して、新しいリスト項目を作成します。
3番目に、insertAfter() メソッドを使用して、最後のリスト項目要素の後にリスト項目要素を挿入します。

すべてをまとめます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript insertAfter() Demo</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        function insertAfter(newNode, existingNode) {
            existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
        }

        let menu = document.getElementById('menu');
        // create a new li node
        let li = document.createElement('li');
        li.textContent = 'Services';
        insertAfter(li,  menu.lastElementChild);
    </script>
</body>

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

挿入後、メニューは次のようになります。

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

概要

JavaScript DOM は、まだ insertAfter() メソッドをサポートしていません。
insertBefore() メソッドと nextSibling プロパティを使用して、親ノードの子として、既存のノードの前に新しいノードを挿入します。

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