JavaScript Node.replaceChild() の例

概要: このチュートリアルでは、JavaScript の Node.replaceChild() メソッドを使用して、HTML 要素を新しい要素に置き換える方法について学びます。

HTML 要素を置き換えるには、node.replaceChild() メソッドを使用します。

parentNode.replaceChild(newChild, oldChild);Code language: CSS (css)

このメソッドでは、newChild は新しいノードで、oldChild ノードは置き換えられる古い子のノードです。

次のアイテムのリストがあるとします

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

次の例では、新しいリストアイテム要素を作成して、メニューの最初のリストアイテム要素を新しい要素に置き換えます。

let menu = document.getElementById('menu');

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

// replace the first list item
menu.replaceChild(li, menu.firstElementChild);Code language: JavaScript (javascript)

すべてまとめます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript DOM: Replace Elements</title>
</head>
<body>
    <ul id="menu">
        <li>Homepage</li>
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        
        // create a new node
        let li = document.createElement('li');
        li.textContent = 'Home';

        // replace the first list item
        menu.replaceChild(li, menu.firstElementChild);
    </script>
</body>
</html>Code language: HTML, XML (xml)

概要

Node.replaceChild() を使用して、ノードの子要素を新しい要素に置き換えます。

クイズ

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