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

JavaScriptの要素を追加/削除するサンプルです。
createElementやremoveChild他のメソッドを使用します。

目次

文字を追加/削除するサンプル

「追加」ボタンを押すと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要素の属性を追加しています。

 

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

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

コード

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

<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(子ノード);

createTextNodeメソッド

変数 = document.createTextNode(文字);

appendChildメソッド

要素.appendChild(子ノード);

関連の記事

JavaScript ID属性で取得/設定する(getElementById)
JavaScript タグ単位で取得/設定する(getElementsByTagName)
JavaScript クラス単位で取得/設定する(getElementsByClassName)
JavaScript 属性値を取得/設定する(getAttribute/setAttribute)
JavaScript 全ての子の要素を取得/設定する(children)
JavaScript ノードを置換するサンプル(replaceChild)

△上に戻る