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

HTML DOM createElement（）メソッド

HTML DOM createElement（）メソッドは、JavaScriptを使用して動的にHTML要素を作成するために使用されます。パラメータとして要素名を取り、その要素ノードを作成します。新しく作成された要素をDOMの一部として使用するには、appendChild（）メソッドを使用する必要があります。

構文

以下は、createElement（）メソッドの構文です-

document.createElement(nodename)

例

createElement（）メソッドの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>createElement() example</h1>
<p>Click the below button to create more buttons</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（）メソッド

[作成]ボタンを3回クリックしたとき。 1つのボタンを1回クリック-

HTML DOM createElement（）メソッド

上記の例では-

ユーザーがクリックするとcreateButton（）メソッドを実行するボタンCREATEを作成しました。

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

createButton（）関数は、ドキュメントオブジェクトのcreateElement（）メソッドを使用して

  1. HTML DOM writeln（）メソッド

    HTML DOM writeln（）は、複数の式（HTMLまたはJavaScript）をドキュメントに直接書き込む機能をユーザーに提供します。 注 −このメソッドは、ドキュメント内のHTMLコードがある場合はそれを上書きし、新しい行に引数を追加します。 構文 以下は構文です- document.write(agruments) 例 HTML DOMドキュメントのwriteln（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>HTML DOM writeln()</title&g

  2. HTML DOM write（）メソッド

    HTML DOM write（）は、複数の式（HTMLまたはJavaScript）をドキュメントに直接書き込む機能をユーザーに提供します。 注 −このメソッドは、ドキュメント内のHTMLコードがある場合はそれを上書きし、新しい行に引数を追加しません。 構文 以下は構文です- document.write(arguments) 例 HTML DOMドキュメントのwrite（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>HTML DOM write()</title> &l