JavaScript replaceChildメソッドで要素を置換するサンプル
環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.103
構文
親ノード.replaceChild(新しいノード, 古い子ノード);
replaceChildは、Nodeインターフェースのメソッドです。
古い子ノードを新しいノードで置き換えます。
replaceChild() は Node 要素のメソッドで、この(親)ノードの中の子ノードを置き換えます。
Node.replaceChild() メソッドは指定ノードの子ノードを別のノードに置き換えます。
使用例
<!DOCTYPE html> <html> <body> <p id="ma">テスト: <span id="cft">置換ボタンを押して下さい</span> </p> <input type="button" value="置換" onclick="chgbtn()"> <script> function chgbtn(){ // テキストボックスを作成 const tt = document.createElement("input"); tt.setAttribute("type","text"); tt.setAttribute("id","cft"); const tb = document.getElementById("cft"); const pb = document.getElementById("ma"); // 文字をテキストボックスに置き換え pb.replaceChild(tt,tb); } </script> </body> </html>
実行結果
「置換」ボタンを押すとreplaceChildメソッドでテキストボックスに置き換えます。