見出し画像

【JavaScript】HTML要素の生成・追加を行う

関野泰宏

HTML要素の生成・追加を行う

createElement()メソッドを使って新規にHTML要素を生成し、それをWebページに追加すれば生成したHTML要素が画面に表示することができます。

サンプルプログラム

<html>
<head>
    <meta charset="utf-8">
    <p id="msg"></p>
    <script>
        var p = document.createElement("p");
        p.innerHTML = "テストメッセージ";
        document.body.appendChild(p);
    </script>
</head>
<body>
</body>
</html>

実行結果


テストメッセージ

JavaScriptで生成したp要素をappendChild()の引数に指定することでHTML要素の追加を行います。

document.body のあとに記述することで、body要素内に生成したp要素を追加するという意味になります。

生成したHTML要素が画面に表示されます。

サンプルダウンロード


もっと学びたい人は！この本がおすすめです！

#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者

この記事が気に入ったらサポートをしてみませんか？