(cache)JavaScript 要素を追加/削除する(createElement他)

JavaScriptの要素を追加/削除するサンプルです。

要素を追加	文字を追加するサンプル
	テキストボックスを追加するサンプル
	リンクを追加するサンプル
要素を削除	IDを指定して要素を削除する
	複数ノードを削除するサンプル

文字を追加するサンプル

「追加」ボタンを押すとcreateElementメソッドで要素のPを作成して文字を追加します。
「削除」ボタンを押すとremoveChildメソッドで要素のPを削除します。

以下のイメージを作成しています。

コード

上記サンプルのコードです。

<div id="div1"></div>
<input type="button" value="追加" onclick="clickBtn1()">
<input type="button" value="削除" onclick="clickBtn2()">

<script>
function clickBtn1(){
	const div1 = document.getElementById("div1");
	// 要素の追加
	if (!div1.hasChildNodes()){
		const p1 = document.createElement("p");
		const text1 = document.createTextNode("テスト");
		p1.appendChild(text1);
		div1.appendChild(p1);
	}
}
function clickBtn2(){
	// 要素の削除
	const div1 = document.getElementById("div1");
	if (div1.hasChildNodes()){
		div1.removeChild(div1.firstChild);
	}
}
</script>

2行目のボタンをクリックすると6行目の関数を実行します。
9行目は、1行目のid=div1に子ノードがないか確認しています。
10行目は、createElementメソッドで要素Pを作成しています。
11行目は、createTextNodeでテキストノードを作成しています。引数は文字として表示されます。
12行目は、appendChildメソッドで要素Pにテキストノードを追加しています。
13行目は、appendChildメソッドで21行目のid=div1に要素Pを追加しています。
19行目は、21行目のid=div1に子ノードがあるか確認しています。
20行目は、removeChildメソッドで子ノードを削除しています。

テキストボックスを追加するサンプル

「追加」ボタンを押すとcreateElementメソッドでテキストボックスを作成します。
「削除」ボタンを押すとremoveChildメソッドでテキストボックスを削除します。

以下のイメージを作成しています。

コード

上記サンプルのコードです。

<div id="div2"></div>
<input type="button" value="追加" onclick="clickBtn3()">
<input type="button" value="削除" onclick="clickBtn4()">

<script>
function clickBtn3(){
	const div2 = document.getElementById("div2");
	// 要素の追加
	if (!div2.hasChildNodes()){
		const input1 = document.createElement("input");
		input1.setAttribute("type","text"); 
		input1.setAttribute("maxlength","5"); 
		input1.setAttribute("size","10"); 
		input1.setAttribute("value","初期表示");
		div2.appendChild(input1);
	}
}
function clickBtn4(){
	const div2 = document.getElementById("div2");
	if (div2.hasChildNodes()){
		div2.removeChild(div2.firstChild);
	}
}
</script>

2行目のボタンをクリックすると6行目の関数を実行します。
10行目は、createElementメソッドでinput要素を作成しています。
11-14行目はsetAttributeメソッドでinput要素の属性を追加しています。

リンクを追加するサンプル

「追加」ボタンを押すとcreateElementメソッドでa要素のリンクを作成します。
「削除」ボタンを押すとremoveChildメソッドでa要素のリンクを削除します。

以下のイメージを作成しています。

コード

上記サンプルのコードです。

<div id="div3"></div>
<input type="button" value="追加" onclick="clickBtn5()">
<input type="button" value="削除" onclick="clickBtn6()">

<script>
function clickBtn5(){
	const div3 = document.getElementById("div3");
	// 要素の追加
	if (!div3.hasChildNodes()){
		const a1 = document.createElement("a");
		a1.href = "https://itsakura.com/";
		a1.target = "_blank";
		a1.innerText = "itsakuraへ遷移します";
		div3.appendChild(a1);
	}
}
function clickBtn6(){
	const div3 = document.getElementById("div3");
	if (div3.hasChildNodes()){
		div3.removeChild(div3.firstChild);
	}
}
</script>

2行目のボタンをクリックすると6行目の関数を実行します。
10行目は、createElementメソッドでa要素を作成しています。
11-13行目は、a要素の属性を追加しています。

IDを指定して要素を削除する

IDを指定して要素を削除するサンプルです。
idがdiv3の要素を削除します。

<div id="div1">
	<div id="div2">
		<p>aaa</a>
	</div>
	<div id="div3">
		<p>bbb</a>
	</div>
</div>
<input type="button" value="ボタン" onclick="clickBtn1()">

<script>
function clickBtn1(){

	const div1 = document.getElementById("div1");
	div1.removeChild(div3);
}
</script>

14行目は、対象の親の要素div1をgetElementByIdメソッドで取得します。
15行目は、removeChildメソッドで子の要素として削除対象のidを指定します。

以下のようにdiv3のみ削除されます。

複数ノードを削除するサンプル

「追加」ボタンを押すとテキストを２つ作成します。
「削除」ボタンを押すとremoveChildメソッドで作成した２つのテキストを削除します。

以下のイメージを作成しています。

コード

上記サンプルのコードです。

<div id="div4"></div>
<input type="button" value="追加" onclick="clickBtn7()">
<input type="button" value="削除" onclick="clickBtn8()">

<script>
function clickBtn7(){
	const div4 = document.getElementById("div4");
	// 要素の追加
	if (!div4.hasChildNodes()){
		const p1 = document.createElement("p");
		const text1 = document.createTextNode("テスト1");
		p1.appendChild(text1);
		div4.appendChild(p1);

		const p2 = document.createElement("p");
		const text2 = document.createTextNode("テスト2");
		p2.appendChild(text2);
		div4.appendChild(p2);
	}
}
function clickBtn8(){
	const div4 = document.getElementById("div4");
	if (div4.hasChildNodes()){
		// 子ノードを全削除
		for (let i=div4.childNodes.length-1; i>=0; i--) {
			div4.removeChild(div4.childNodes[i]);
		}
	}
}
</script>

25-27行目で、ループを回して削除しています。

createElementメソッド

変数 = document.createElement(タグ名);

引数は、タグ名(Pやh2など)を指定します。
戻り値は、新しい要素です。
要素とは、<input type="button" value="ボタン">とある場合、inputが要素です。
documentインターフェースのメソッドです。
以下はMDNのcreateElementメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

removeChildメソッド

親ノード.removeChild(子ノード);

引数の子ノードを削除します。
Nodeインターフェースのメソッドです。
以下はMDNのremoveChildメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild

createTextNodeメソッド

変数 = document.createTextNode(文字);

引数は、文字を指定します。
戻り値はテキストノードです。
documentインターフェースのメソッドです。
以下はMDNサイトのcreateTextNodeメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/createTextNode

appendChildメソッド

要素.appendChild(子ノード);

子ノードを追加します。
Nodeインターフェースのメソッドです。
以下はMDNサイトのappendChildメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild