要素の追加と削除(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>

Javascript超初心者入門目次

• Javascriptとは
• Javascriptの変数、配列、連想配列
• Javascriptのfor文とif文とは
• Javascriptで要素(タグ)を追加削除
• イベント処理(ボタンが押されたら実行等)について解説
• タイマー(setTimeoutとsetInterval)を使って指定秒数後に処理を行ったり定期的に処理を行う方法について解説
• canvasに描画する方法について解説
• Javascriptで要素を取得する方法