HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcreateElement()メソッドとは？使い方とサンプルコードを解説

HTML DOMのcreateElement()メソッドは、JavaScriptを使ってHTML要素を動的に生成するためのメソッドです。引数に要素名を指定すると、その要素ノードが新しく作成されます。なお、作成した要素を実際にDOMツリーの一部として反映させるには、appendChild()メソッドなどでドキュメントに追加する必要があります。

構文

createElement()メソッドの基本構文は以下の通りです。

document.createElement(nodename)

引数「nodename」には、生成したいHTML要素のタグ名（例：「BUTTON」「DIV」「P」など）を文字列で指定します。

サンプルコード

ここでは、ボタンをクリックするたびに新しいボタンを動的に追加する例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>createElement() example</h1>
<p>下のボタンをクリックすると、新しいボタンが追加されます</p>
<button onclick="createButton()">CREATE</button>
<br><br>
<script>
    var i=0;
    function createButton() {
        i++;
        var btn = document.createElement("BUTTON");
        btn.innerHTML="BUTTON"+i;
        var br= document.createElement("BR");
        document.body.appendChild(btn);
        document.body.appendChild(br);
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、まず次のような画面が表示されます。

HTML DOMのcreateElement()メソッドとは？使い方とサンプルコードを解説

CREATEボタンを1回クリックするごとに、新しいボタンが1つずつ追加されます。たとえば3回クリックすると、以下のように3つのボタンが表示されます。

HTML DOMのcreateElement()メソッドとは？使い方とサンプルコードを解説

コードの解説

このサンプルでは、まずユーザーがクリックするとcreateButton()関数を実行するCREATEボタンを作成しています。

<button onclick="createButton()">CREATE</button>

createButton()関数の中では、documentオブジェクトのcreateElement()メソッドを使って<button>要素を生成しています。さらにinnerHTMLプロパティで、ボタンの表面に表示されるテキストを設定しています。同様にして、<br>要素もcreateElement()メソッドで生成しています。

最後に、appendChild()メソッドを使って、生成した<button>要素と<br>要素をドキュメントのbodyに追加しています。これにより、新しいボタンが画面上に表示される仕組みです。

var i=0;
function createButton() {
    i++;
    var btn = document.createElement("BUTTON");
    btn.innerHTML="BUTTON"+i;
    var br= document.createElement("BR");
    document.body.appendChild(btn);
    document.body.appendChild(br);
}

変数「i」はカウンターとして機能しており、クリックのたびに1ずつ増加することで、「BUTTON1」「BUTTON2」「BUTTON3」といように連番のラベルが付けられます。このようにcreateElement()とappendChild()を組み合わせることで、ページを再読み込みせずに要素を動的に追加できます。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド