「JavaScript」replaceChildメソッドでノード要素を置換するサンプル

2021年12月13日

書式
Node.replaceChild() メソッドは指定ノードの子ノードを別のノードに置き換えます。
replacedNode = parentNode.replaceChild(newChild, oldChild);
newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
oldChild : 置き換えられる既存ノード
replacedNode : 置き換えられたノード（oldChild と同じノード）

使用例

<div id="kk">
      テスト:<br><span id="cft">ボタンを押すと、ボタン「検証」に置き換えます</span>
</div>
<br>
<!--ボタンを押すとfuncA関数を呼び出します -->
<input type="button" value="テスト">

<script>
function funcA(){
    //置き換える前対象を指定
      const km = document.getElementById("cft");
    //ボタンを作成
    const cft = document.createElement("input");
    //type属性作成
      cft.setAttribute("type","button");
    //ボタンの名前を指定
      cft.setAttribute("value","検証");
    //ボタンのidを指定
      cft.setAttribute("id","hh");
    
    //置き換える対象を指定
      const ele = document.getElementById("kk");
　　　//replaceChildメソッドで置き換え
      ele.replaceChild(cft, km);
}

</script>

動作確認
「テスト」ボタンを押すと、replaceChildメソッドで置き換えを行っています。
セレクター[cft]に「検証」ボタンに置き換えます