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

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

目次	文字を追加する(createTextNode)
	テキストボックスを追加する(text)
	リンクを追加する(a)
	セレクトボックスを追加する(select)
	ラジオボタンを追加する(radio)
	画像を追加する(img)
	要素を削除する(removeChild)
	複数の要素を削除する

文字を追加する(createTextNode)

「追加」ボタンを押すと文字を追加します。

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

<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>

createElementは要素、createTextNodeは文字列を作成します。
以下のように文字列が追加されます。

テキストボックスを追加する(text)

「追加」ボタンを押すとテキストボックスを作成します。

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

<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>

createElementは要素、setAttributeは属性を作成します。
以下のようにテキストボックスが追加されます。

リンクを追加する(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 = "リンクです";
      div3.appendChild(a1);
    }
  }
  function clickBtn6() {
    const div3 = document.getElementById("div3");
    if (div3.hasChildNodes()) {
      div3.removeChild(div3.firstChild);
    }
  }
</script>

createElementでa要素を作成します。
以下のようにリンクが追加されます。

セレクトボックスを追加する(select)

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

<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 select1 = document.createElement("select");
      const opt1 = document.createElement("option");
      opt1.text = "りんご";
      opt1.value = "1";
      const opt2 = document.createElement("option");
      opt2.text = "ばなな";
      opt2.value = "2";
      const opt3 = document.createElement("option");
      opt3.text = "みかん";
      opt3.value = "3";
      select1.appendChild(opt1);
      select1.appendChild(opt2);
      select1.appendChild(opt3);
      div4.appendChild(select1);
    }
  }
  function clickBtn8() {
    const div4 = document.getElementById("div4");
    if (div4.hasChildNodes()) {
      div4.removeChild(div4.firstChild);
    }
  }
</script>

ラジオボタンを追加する(radio)

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

<div id="div5"></div>
<input type="button" value="追加" onclick="clickBtn7()" />

<script>
  function clickBtn7() {
    const div5 = document.getElementById("div5");
    // 要素の追加
    if (!div5.hasChildNodes()) {
      const input1 = document.createElement("input");
      input1.type = "radio";
      input1.name = "fruit";
      input1.id = "r1";
      input1.value = "red";
      const input2 = document.createElement("input");
      input2.type = "radio";
      input2.name = "fruit";
      input2.id = "r2";
      input2.value = "blue";

      const text1 = document.createTextNode("red");
      const Label1 = document.createElement("label");
      Label1.htmlFor = input1.id;
      Label1.appendChild(input1);
      Label1.appendChild(text1);

      const text2 = document.createTextNode("blue");
      const Label2 = document.createElement("label");
      Label2.htmlFor = input2.id;
      Label2.appendChild(input2);
      Label2.appendChild(text2);
      div5.appendChild(Label1);
      div5.appendChild(Label2);
    }
  }
</script>

ラジオボタンの値の表示は、ラベルが必要です。
以下のようにラジオボタンが追加されます。

画像を追加する(img)

<div id="div1"></div>
<script>
  const div1 = document.getElementById("div1");

  const img1 = document.createElement("img");
  img1.src = "./img/test1.png";
  img1.width = 50;
  img1.height = 50;
  img1.style.cssText = "margin-left:20px";
  div1.appendChild(img1);
</script>

9行目のようにcssの追加も可能です。

要素を削除する(removeChild)

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

removeChildメソッドは、引数の子ノードを削除します。

<div id="div1">
	<div id="div2">
		<p>aaa</a>
	</div>
</div>
<input type="button" value="ボタン" onclick="clickBtn1()">
<script>
function clickBtn1(){
	const div1 = document.getElementById("div1");
	div1.removeChild(div2);
}
</script>

以下のように指定した要素が削除されます。

複数の要素を削除する

複数の要素はループを使用して削除します。

<div id="div1">
	<div id="div2">
		<p>テスト1</a>
  </div>
  <div id="div3">
		<p>テスト2</a>
	</div>
</div>
<input type="button" value="ボタン" onclick="clickBtn1()">
<script>
function clickBtn1(){
  const div1 = document.getElementById("div1");
  for (let i=div1.childNodes.length-1; i>=0; i--) {
    div1.removeChild(div1.childNodes[i]);
  }
}
</script>

以下のように指定した要素が削除されます。

以下はMDNのremoveChildメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild

createElementメソッド

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

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

createTextNodeメソッド

変数 = document.createTextNode(文字);

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

appendChildメソッド

要素.appendChild(子ノード);

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