要素の追加と削除(innerHTML,createElement,prepend,append,after,before,remove) ～Javascript超初心者入門

Javascriptで要素(タグ)を追加削除

Javascriptで要素（タグ）を追加削除する方法はいくつかあるのですが、
innerHTMLプロパティ,document.createElement()メソッド,prepend()メソッド,append()メソッド,after()メソッド,before()メソッド,remove()メソッドに限定して解説します。
プロパティとは属性のことで、代入「=」命令を使って操作します。
メソッドは命令のことでメソッド名の最後に丸カッコ「()」を付けます。丸カッコ内には必要な場合に「引数」を付けます。
「引数」とはメソッドを実行するときに与える追加情報です。
例えば以下は、「要素」の直後に「追加要素」を追加します。
要素.after(追加要素)

要素.innerHTMLプロパティ

innerHTMLは要素（タグ）内のHTMLテキストを取得したり設定したりするプロパティです。 //id="IdName"の要素(タグ)を取得し変素「elm」に入れる
let elm = document.getElementById("IdName");
//要素「elm」のHTMLテキストを表示
alert(elm.innerHTML);
以下のソースコードではボタンを押すとidが「test1」のdivタグを取得しHTMLテキストを表示します。
ここはdivタグ
<p>こんにちは</p> と表示されると思います。

<div id="test1" style="display:none">
  ここはdivタグ
  <p>こんにちは</p>
</div>
<input type="button" onclick="test1()" value="idが「test1」のdivタグのHTMLテキストを表示">

<script>
  function test1(){
    //idが「test1」のdivタグを取得し変数「elm」に入れる
    let elm=document.querySelector("div#test1");
    //「elm」のHTMLテキストを表示する
    alert(elm.innerHTML);
  }
</script>

次は要素(divタグ)のHTMLテキストを書き換えてみます。
スタイルシートを設定したpタグも入れます。
ダブルクォートで括った文字列内に文字列を入れる場合はシングルクォートで括ります。 "<p style='margin:8px;background:#F9F;'><p>"

<div id="test2" style="color:blue;background:#9FF;">
  ボタンを押すとHTMLテキストが書き換わります
</div>
<input type="button" onclick="test2()" value="idが「test2」のdivタグのHTMLテキストを書き換え">

<script>
  function test2(){
    //idが「test2」のdivタグを取得し変数「elm」に入れる
    let elm = document.querySelector("div#test2");
    //変数「elm」に入れたHTMLテキストを書き換える
    elm.innerHTML =
      "書き換えました。<br><p style='margin:8px;background:#F9F;'>pタグ内の文字<p>";
  }
</script>

document.createElement("タグの種類")メソッド

指定した"タグの種類"の要素を作成します。
以下は要素（divタグ）を作成して変数「elm」に代入します。
また、id属性を「myId」に設定し、スタイルシートの境界線を設定しています。 let elm = document.createElement("div");
elm.setAttribute("id","myId"); elm.style.border="1px solid #000000";
つまり変数「elm」は
<div id="myId" style="border:1px solid #000000;"></div> に設定されます。

要素.prepend(追加したい要素)メソッド

「要素」の子要素内の一番最初に「追加したい要素」を追加します。

<div id="test3" style="background:#9FF;padding:4px;">
  <p style="background:#F99;margin:8px;">最初からある要素</p>
</div>
<input type="button" onclick="test3()" value="要素の子要素内の一番最初に要素を追加(prepend)">

<script>
  function test3(){
    //idが「test3」のdivタグを取得し変数「elm」に入れる
    let elm = document.querySelector("div#test3");

    //追加したい要素（divタグ）を作成
    let add_elm = document.createElement("div");

    //追加したい要素のHTMLテキストを設定
    add_elm.innerHTML="追加される<span>要素</span>";

    //追加したい要素のスタイルシートを設定
    add_elm.style.background="#CCF";
    add_elm.style.margin="8px";
    
    //変数「elm」要素の子要素内の一番最初に変数「add_elm」要素を追加する
    elm.prepend(add_elm);
  }
</script>

要素.append(追加したい要素)メソッド

「要素」の子要素内の一番最最後に「追加したい要素」を追加します。

<div id="test4" style="background:#9FF;padding:4px;">
  <p style="background:#F99;margin:8px;">最初からある要素</p>
</div>
<input type="button" onclick="test4()" value="要素の子要素内の一番最後に要素を追加(append)">

<script>
  function test4(){
    //idが「test4」のdivタグを取得し変数「elm」に入れる
    let elm = document.querySelector("div#test4");

    //追加したい要素（divタグ）を作成
    let add_elm = document.createElement("div");

    //追加したい要素のHTMLテキストを設定
    add_elm.innerHTML="追加される<span>要素</span>";

    //追加したい要素のスタイルシートを設定
    add_elm.style.background="#CCF";
    add_elm.style.margin="8px";
    
    //変数「elm」要素の子要素内の一番最後に変数「add_elm」要素を追加する
    elm.append(add_elm);
  }
</script>

要素.before(追加したい要素)メソッド

「要素」の直前に「追加したい要素」を追加します。

<div id="test5" style="background:#9FF;padding:4px;">
  <p style="background:#F99;margin:8px;">最初からある要素</p>
</div>
<input type="button" onclick="test5()" value="要素の直前に要素を追加(before)">

<script>
  function test5(){
    //idが「test5」のdivタグを取得し変数「elm」に入れる
    let elm = document.querySelector("div#test5");

    //追加したい要素（divタグ）を作成
    let add_elm = document.createElement("div");

    //追加したい要素のHTMLテキストを設定
    add_elm.innerHTML="追加される<span>要素</span>";

    //追加したい要素のスタイルシートを設定
    add_elm.style.background="#CCF";
    add_elm.style.margin="8px";
    
    //変数「elm」要素の直前に変数「add_elm」要素を追加する
    elm.before(add_elm);
  }
</script>

要素.after(追加したい要素)メソッド

「要素」の直後に「追加したい要素」を追加します。

<div id="test6" style="background:#9FF;padding:4px;">
  <p style="background:#F99;margin:8px;">最初からある要素</p>
</div>
<input type="button" onclick="test6()" value="要素の直後に要素を追加(after)">

<script>
  function test6(){
    //idが「test6」のdivタグを取得し変数「elm」に入れる
    let elm = document.querySelector("div#test6");

    //追加したい要素（divタグ）を作成
    let add_elm = document.createElement("div");

    //追加したい要素のHTMLテキストを設定
    add_elm.innerHTML="追加される<span>要素</span>";

    //追加したい要素のスタイルシートを設定
    add_elm.style.background="#CCF";
    add_elm.style.margin="8px";
    
    //変数「elm」要素の直後に変数「add_elm」要素を追加する
    elm.after(add_elm);
  }
</script>

要素.remove()メソッド

「要素」を削除します。

<div id="test7" style="background:#9FF;padding:4px;">
  <p style="background:#F99;margin:8px;">最初からある要素</p>
</div>
<input type="button" onclick="test7()" value="要素の削除(remove)">

<script>
  function test7(){
    //idが「test7」のdivタグの子要素のpタグを取得し変数「elm」に入れる
    let elm = document.querySelector("div#test7>p");
    
    if(elm !==null){  //要素が存在していたら
      //変数「elm」要素を削除
      elm.remove();
    }
  }
</script>