ゼロから始めるJavaScript講座Vol19 DOM操作〜要素の作成・追加〜



ゼロから始めるJavaScript講座Vol19 DOM操作〜要素の作成・追加〜
目次
  1. ゼロから始めるJavaScript講座DOM操作要素の作成・追加
  2. 要素の作成・追加

ゼロから始めるJavaScript講座DOM操作要素の作成・追加

要素の作成・追加

DOMでHTMLやCSSの内容を変更する方法を学びましたが、今度は要素自体を作成し追加する方法を紹介します。まずはお手本通りプログラムを作成してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>要素の作成・追加</title>
    <script>
        function add_element() {
            // p要素を作成
            var element_p = document.createElement('p');
            // 作成したp要素の内容を設定
            element_p.innerHTML = 'p要素を追加しました';

            var box = document.getElementById('box');
            // div要素に作成したp要素を追加
            box.appendChild(element_p);
        }

        window.onload = function() {
            var add = document.getElementById('add');
            add.addEventListener('click', add_element, false);
        }
    </script>
</head>
<body>
    <button id="add">要素を追加</button>
    <div id="box"></div>
</body>
</html>

javascript-element-1-639

javascript-element-2-639

javascript-element-3-639

document.createElement()

element.appendChild()

NEXTLESSONDOM操作繰り返し実行DOM操作繰り返し実行

PREVLESSONDOM操作イベントの実行タイミングDOM操作イベントの実行タイミング

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp