この記事では、JavaScript を使用して HTML 要素を作成する方法について説明します。ここでは、作成した要素をドキュメントに挿入する例をいくつか示します。
要素を作成する方法は、HTML で要素を作成することだけではありません。ただし、簡単にするために、多くの場合、HTML ドキュメント内で要素を直接作成しますが、JavaScript を使用して要素を作成することもできます。
の document.createElement() JavaScript を介して、指定された名前の HTML 要素ノードを動的に作成するために使用されます。このメソッドは要素の名前をパラメータとして受け取り、その要素ノードを作成します。
要素の作成後、appendChild() メソッドまたは insertBefore() メソッドを使用して、作成した要素をドキュメントに挿入できます。
使用できます 削除子() メソッドを使用してノードを削除することもできます。 replaceChild() ノードを置き換えるメソッド。
構文
document.createElement(nodename);
このメソッドは、次のように記述された単一のパラメータ値を受け入れます。
2つの文字列の違いPython
ノード名: これは必須のパラメータです。このパラメータは文字列型です。作成する必要がある要素の名前を指定します。パラメータで指定された要素名によって要素が作成されます。そうしないと、指定された要素の名前が認識されない場合、不明な HTML 要素が作成されます。
の document.createElement() 新しく作成された要素を返します。
それでは、使用例をいくつか見てみましょう。 document.createElement() 方法。ここでは 2 つの例を示します。最初の例では、 appendChild() メソッドを使用して要素をドキュメントに挿入します。2 番目の例では、 insertBefore() によって作成された要素を挿入するメソッド document.createElement() 方法。
例1
この例では、 document.createElement() 新しいボタン要素を作成するメソッド。作成した要素を使用して挿入します。 appendChild() 方法。ここに、 楽しい（） を使用して新しいボタン要素を作成するメソッド createElement() 方法。を使用してテキストを設定します。 内部HTML ボタンの上部に表示されます。
以下の例を見てみましょう。
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button 今すぐテストしてください 出力
上記のコードを実行すると、出力は次のようになります -
指定されたボタンをクリックすると、出力は次のようになります -
例2
この例では、 document.createElement() 新しいボタン要素を作成するメソッド。ここで使用しているのは、 insertBefore() 作成した要素を挿入するメソッドです。段落子要素を持つ div 要素があります。新しいボタン要素は、div 要素の段落子要素の前に挿入されます。
以下の例を見てみましょう。
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button 今すぐテストしてください 出力
上記のコードを実行すると、出力は次のようになります -
上のボタンをクリックすると、出力は次のようになります -
上のスクリーンショットは、新しいボタン要素が段落要素の前に挿入されていることを示しています。これは、 insertBeofre() を使用して作成された新しい要素を挿入するメソッド document.createElement() 方法。