JavaScriptのreplaceChildで要素を置換するサンプルです。
目次
サンプル | replaceChildメソッド |
要素を置き換えるサンプル |
replaceChildメソッド
親ノード.replaceChild(新しいノード, 古い子ノード); |
- 古い子ノードを新しいノードで置き換えます。
- replaceChildは、Nodeインターフェースのメソッドです。
- 以下はMDNのreplaceChildメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Node/replaceChild
要素を置き換えるサンプル
「置換え1」ボタンを押すとreplaceChildメソッドでボタンに置き換えます。
「置換え2」ボタンを押すとreplaceChildメソッドでテキストボックスに置き換えます。
テスト:ボタンを押して下さい
上記サンプルのコードです。
<p id="p1">テスト:
<span id="a1">ボタンを押して下さい</span>
</p>
<input type="button" value="置換1" onclick="clickBtn1()">
<input type="button" value="置換2" onclick="clickBtn2()">
<script>
function clickBtn1(){
const new1 = document.createElement("input");
new1.setAttribute("type","button");
new1.setAttribute("value","sample");
new1.setAttribute("id","a1");
const old1 = document.getElementById("a1");
const p1 = document.getElementById("p1");
p1.replaceChild(new1, old1);
}
function clickBtn2(){
const new2 = document.createElement("input");
new2.setAttribute("type","text");
new2.setAttribute("id","a1");
const old2 = document.getElementById("a1");
const p1 = document.getElementById("p1");
p1.replaceChild(new2, old2);
}
</script>
4行目のボタンをクリックすると8行目の関数を実行します。
9-12行目は、ボタンを作成しています。
14行目は置き換える場所を取得しています。2行目を置き換えます。
16行目は置き換える対象を指定しています。親ノードになります。1行目です。
18目は、replaceChildメソッドで置き換えを行っています。
21-23行目は、テキストボックスを作成しています。
29行目は、replaceChildメソッドで置き換えを行っています。
関連の記事
JavaScript 属性値を取得/設定/削除する(getAttribute)
JavaScript 要素を追加/削除する(createElement他)