JS/ES – DOM – 要素の追加・変更・削除

1 概要
2 要素の追加
- 2.1 bodyへの追加
- 2.2 親要素への追加
3 要素の入れ替え
4 要素の削除

概要

window.documentのメソッドによって、bodyや親要素に対して動的に要素を追加・変更・削除する方法。

なお要素のタグで囲まれたテキストの操作についてはこちらにまとめた。

要素の追加

要素の追加は以下の手順。

document.createElement()で要素オブジェクトを生成
- 引数で生成する要素名を指定
要素の内容やスタイルを設定
- 要素のスタイルはCSSプロパティーで設定
- 要素のテキストを設定
親要素のappendChild()メソッドの引数に追加する要素を指定して追加

bodyへの追加

bodyへの追加も他の親要素への追加と同じで、親要素としてdoccument.bodyを指定する。以下の例では、htmlに書かれたp要素に続けて動的にp要素を追加している。

appendChild()はbody要素が読み込まれた後でなければならない。イベントリスナーの登録タイミングと同じように、windows.onloadの中で実行するなど留意する必要あり（以下の例では要素の生成もonloadの中に書いているが、最低限appendChild()がここにあればよい）。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Create &amp; append to body</title>
    <script>
      window.onload = () => {
        p0 = document.getElementById('p0');
        console.log(p0);

        p1 = document.createElement('p');
        p1.innerHTML = '既存のp要素の後にp要素を追加';
        document.body.appendChild(p1);
        console.log(p1);

        p2 = document.createElement('p');
        p2.innerHTML = '動的に追加されたp要素の後にp要素を追加';
        document.body.appendChild(p2);
        console.log(p2);
      }
    </script>
  </head>
  <body>
    <p id="p0">元から設置されたp要素です</p>
  </body>
</html>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Create &amp; append to body</title>
    <script>
      window.onload = () => {
        p0 = document.getElementById('p0');
        console.log(p0);

        p1 = document.createElement('p');
        p1.textContent = '既存のp要素の後にp要素を追加';
        document.body.appendChild(p1);
        console.log(p1);

        p2 = document.createElement('p');
        p2.textContent = '動的に追加されたp要素の後にp要素を追加';
        document.body.appendChild(p2);
        console.log(p2);
      }
    </script>
  </head>
  <body>
    <p id="p0">元から設置されたp要素</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Create & append to body</title>

window.onload = () => {

p0 = document.getElementById('p0');

console.log(p0);

p1 = document.createElement('p');

p1.innerHTML = '既存のp要素の後にp要素を追加';

document.body.appendChild(p1);

console.log(p1);

p2 = document.createElement('p');

p2.innerHTML = '動的に追加されたp要素の後にp要素を追加';

document.body.appendChild(p2);

console.log(p2);

}

</script>

</head>

<body>

<p id="p0">元から設置されたp要素です</p>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Create & append to body</title>

window.onload = () => {

p0 = document.getElementById('p0');

console.log(p0);

p1 = document.createElement('p');

p1.textContent = '既存のp要素の後にp要素を追加';

document.body.appendChild(p1);

console.log(p1);

p2 = document.createElement('p');

p2.textContent = '動的に追加されたp要素の後にp要素を追加';

document.body.appendChild(p2);

console.log(p2);

}

</script>

</head>

<body>

<p id="p0">元から設置されたp要素</p>

</body>

</html>

結果

元から設置されたp要素

既存のp要素の後にp要素を追加

動的に追加されたp要素の後にp要素を追加

元から設置されたp要素

既存のp要素の後にp要素を追加

動的に追加されたp要素の後にp要素を追加

親要素への追加

生成した要素を特定の親要素の子要素として登録する場合、親要素のappendChild()の引数に追加する要素を指定。

以下の例では、HTMLに書かれたdiv要素の中とその次にp要素を追加している。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Create &amp; append as child</title>
    <script>
      window.onload = () => {
        div = document.getElementById('div');

        p0 = document.createElement('p');
        p0.textContent = 'div要素の子要素としてp要素を追加';
        div.appendChild(p0);

        p1 = document.createElement('p');
        p1.textContent = 'div要素の2番目の子要素としてp要素を追加';
        div.appendChild(p1);

        p2 = document.createElement('p');
        p2.textContent = 'div要素の次にp要素を追加';
        document.body.appendChild(p2);
      }
    </script>
  </head>
  <body>
    <div id="div" style="border: solid;">元から設置されたdiv要素</div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Create & append as child</title>

window.onload = () => {

div = document.getElementById('div');

p0 = document.createElement('p');

p0.textContent = 'div要素の子要素としてp要素を追加';

div.appendChild(p0);

p1 = document.createElement('p');

p1.textContent = 'div要素の2番目の子要素としてp要素を追加';

div.appendChild(p1);

p2 = document.createElement('p');

p2.textContent = 'div要素の次にp要素を追加';

document.body.appendChild(p2);

}

</script>

</head>

<body>

<div id="div" style="border: solid;">元から設置されたdiv要素</div>

</body>

</html>

結果

元から設置されたdiv要素

div要素の子要素としてp要素を追加

div要素の2番目の子要素としてp要素を追加

div要素の次にp要素を追加

要素の入れ替え

要素の入れ替えは、入れ替える要素の親要素のreplace()メソッドを実行する。1つ目の引数に入れ替え後の新しい要素を、2つ目の引数に入れ替えられる前の要素を指定する。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Replace</title>
    <script>
      window.onload = () => {
        p0 = document.getElementById('p0');
        p1 = document.getElementById('p1');

        p2 = document.createElement('p');
        p2.textContent = '追加された要素の1つ目';
        document.body.appendChild(p2);

        p3 = document.createElement('p');
        p3.textContent = '追加された要素の2つ目';
        document.body.appendChild(p3);

        new_p = document.createElement('p');
        new_p.textContent = '置き換え用p要素の1つ目';
        document.body.replaceChild(new_p, p0);

        new_p = document.createElement('p');
        new_p.textContent = '置き換え用p要素の2つ目';
        document.body.replaceChild(new_p, p2);
      }
    </script>
  </head>
  <body>
    <p id="p0">元から設置されたp要素の1つ目</p>
    <p id="p1">元から設置されたp要素の2つ目</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Replace</title>

window.onload = () => {

p0 = document.getElementById('p0');

p1 = document.getElementById('p1');

p2 = document.createElement('p');

p2.textContent = '追加された要素の1つ目';

document.body.appendChild(p2);

p3 = document.createElement('p');

p3.textContent = '追加された要素の2つ目';

document.body.appendChild(p3);

new_p = document.createElement('p');

new_p.textContent = '置き換え用p要素の1つ目';

document.body.replaceChild(new_p, p0);

new_p = document.createElement('p');

new_p.textContent = '置き換え用p要素の2つ目';

document.body.replaceChild(new_p, p2);

}

</script>

</head>

<body>

<p id="p0">元から設置されたp要素の1つ目</p>

<p id="p1">元から設置されたp要素の2つ目</p>

</body>

</html>

結果

置き換え用p要素の1つ目

元から設置されたp要素の2つ目

置き換え用p要素の2つ目

追加された要素の2つ目

要素の削除

要素を削除するには、その要素を含む親要素のremoveChild()メソッドに削除する要素を指定する。

以下の例では、HTMLに書かれた2つのp要素と動的に追加した2つのp要素から1つずつを削除している。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Remove</title>
    <script>
      window.onload = () => {
        p0 = document.getElementById('p0');
        p1 = document.getElementById('p1');

        p2 = document.createElement('p');
        p2.textContent = '追加された要素の1つ目です';
        document.body.appendChild(p2);

        p3 = document.createElement('p');
        p3.textContent = '追加された要素の2つ目です';
        document.body.appendChild(p3);

        document.body.removeChild(p0);
        document.body.removeChild(p2);
      }
    </script>
  </head>
  <body>
    <p id="p0">元から設置されたp要素の1つ目です</p>
    <p id="p1">元から設置されたp要素の2つ目です</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Remove</title>

window.onload = () => {

p0 = document.getElementById('p0');

p1 = document.getElementById('p1');

p2 = document.createElement('p');

p2.textContent = '追加された要素の1つ目です';

document.body.appendChild(p2);

p3 = document.createElement('p');

p3.textContent = '追加された要素の2つ目です';

document.body.appendChild(p3);

document.body.removeChild(p0);

document.body.removeChild(p2);

}

</script>

</head>

<body>

<p id="p0">元から設置されたp要素の1つ目です</p>

<p id="p1">元から設置されたp要素の2つ目です</p>

</body>

</html>

結果

元から設置されたp要素の2つ目です

追加された要素の2つ目です

TauStation

JS/ES – DOM – 要素の追加・変更・削除

概要

要素の追加

bodyへの追加

親要素への追加

要素の入れ替え

要素の削除

コメントを残すコメントをキャンセル

概要

要素の追加

bodyへの追加

親要素への追加

要素の入れ替え

要素の削除

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル