JavaScript replaceChild 要素を置換する

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メソッドで置き換えを行っています。