更新日: 2017年02月27日
公開日: 2015年12月05日

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

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

ゼロから始める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>