「JavaScript」replaceChildメソッドでノード要素を置換するサンプル
書式
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="テスト" onclick="funcA()"> <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]に「検証」ボタンに置き換えます