JavaScript replaceChild 要素を置換する

JavaScriptのreplaceChildで要素を置換するサンプルです。

サンプル	要素を置換するサンプル(replaceChild)
	要素を置換するサンプル(replaceChildren)

要素を置換するサンプル(replaceChild)

TEST： Click the button

上記サンプルのコードです。

<p id="p1">
    TEST：
    <span id="span1">Click the button</span>
</p>
<input type="button" value="click1" onclick="clickBtn11()" />
<input type="button" value="click2" onclick="clickBtn12()" />

<script>
    const p1 = document.getElementById("p1");

    function clickBtn11() {
        const new1 = document.createElement("input");
        new1.setAttribute("type", "button");
        new1.setAttribute("value", "sample");
        new1.setAttribute("id", "span1");
        const old1 = document.getElementById("span1");
        p1.replaceChild(new1, old1);
    }
    function clickBtn12() {
        const new2 = document.createElement("input");
        new2.setAttribute("type", "text");
        new2.setAttribute("id", "span1");
        const old2 = document.getElementById("span1");
        p1.replaceChild(new2, old2);
    }
</script>

12-15行目は、ボタンを作成しています。
17目は、replaceChildメソッドで置き換えを行っています。
20-22行目は、テキストボックスを作成しています。
24行目は、replaceChildメソッドで置き換えを行っています。

親ノード.replaceChild(新しいノード, 古い子ノード);

古い子ノードを新しいノードで置き換えます。
replaceChildは、Nodeインターフェースのメソッドです。

要素を置換するサンプル(replaceChildren)

test1

test2

------------------------

test3

test4

上記サンプルのコードです。

<div id="divA">
    <div id="div1">
        <p>test1</p>
        <p>test2</p>
    </div>
</div>
<p>------------------------</p>
<div id="divB">
    <div id="div2">
        <p>test3</p>
        <p>test4</p>
    </div>
</div>
<div id="divC"></div>
<input type="button" value="click1" onclick="clickBtn21()" />
<input type="button" value="click2" onclick="clickBtn22()" />

<script>
    function clickBtn21() {
        const divA = document.getElementById("divA");
        const divB = document.getElementById("divB");
        const divC = document.getElementById("divC");

        const div1 = document.getElementById("div1");
        const div2 = document.getElementById("div2");
        const div3 = document.getElementById("div3");
        divC.replaceChildren(div2);
        divB.replaceChildren(div1);
        divA.replaceChildren(div2);
    }
    function clickBtn22() {
        const divA = document.getElementById("divA");
        const divB = document.getElementById("divB");
        const divC = document.getElementById("divC");

        const div1 = document.getElementById("div1");
        const div2 = document.getElementById("div2");
        const div3 = document.getElementById("div3");
        divC.replaceChildren(div1);
        divB.replaceChildren(div2);
        divA.replaceChildren(div1);
    }
</script>

replaceChildrenは、複数の子要素を置き換えます。

replaceChildren()の引数無しで子要素を全て削除するという使い方もあります。