JavaScript で文字列から要素を作成するにはどうすればよいですか?

このチュートリアルでは、JavaScript で文字列から要素を作成するさまざまな方法を見ていきます。 Web サイトをインタラクティブにするために要素を動的に生成する必要がある場合、文字列から要素を作成すると非常に便利です。例としては、To Do 項目を追加、削除、編集する To Do リスト アプリのようなものがあります。

createElement() メソッド

#createElement() メソッドを使用して JavaScript アイテムを作成します。特定の要素を作成するには、項目名を文字列として createElement() メソッドに渡します。

createElement(tagName) この関数には、このメソッドを使用して作成されるタグの名前としてパラメーターが 1 つあります。ここで、tagName はパラメータ名であり、文字列形式になります。文字列から作成される要素は 1 つだけであることに注意してください。 ＃＃＃文法＃＃＃ リーリー

tagName

の位置に、

p (段落)、h1 (タイトル 1)、img などのタグ名を渡します。 ＃＃＃ （写真）。 createElement は tagName を小文字にするため、大文字と小文字を気にする必要はありません。 ＃＃＃ステップ＃＃＃

ステップ 1

- h3 や p

などの要素値を使用して文字列を作成します

• ステップ 2 - 文字列をパラメータとして

  createElement()
メソッドに渡します。変数に値を代入します。これにより、必要な要素が作成されます。

• ステップ 3 - 要素を作成した後、

  innerText
属性を使用して両方の要素に必要なテキストを割り当てます。

• ステップ 4 - 結局のところ、追加では、append() または appendChild() メソッドを使用して、作成された要素を Web ページに追加し、Web ユーザーに表示されるようにします。

• 文字列からタイトルと段落を作成してみましょう。 リーリー したがって、要素の作成方法を理解する必要がありますが、要素を作成しても、その要素は DOM の一部ではないため、ユーザーに表示することはできません。代わりに、アタッチして DOM の一部にする必要があります。それを Web ページにコピーします。

したがって、

append()

や

appendChild() などのメソッドを使用します。

＃＃＃例＃＃＃

作成した要素を追加するには、append() メソッドを使用します。 以下の例では、 document createElement() メソッドを使用して、2 つの要素 h3 と p を作成します。次に、これらの要素にテキストを割り当て、append() メソッドを使用して要素を DOM に追加します。最後に、

innerHTML

属性を使用して要素が表示されます。

リーリー ＃＃＃例＃＃＃

appendChild() メソッドを使用して、作成した要素を追加します。

以下の例では、ドキュメントの createElement() メソッドを使用して、2 つの要素 h3 と p を作成します。次に、これらの要素にテキストを割り当て、

appendChild()

メソッドを使用して要素を DOM に追加します。最後に、

innerHTML

属性を使用して要素 を表示します。 リーリー ここで、上記のプログラムの出力は同じだ、では、2 つのプログラムは何が違うのかと考えているかもしれません。

はい、どちらも HTML ドキュメントにノードを追加するために使用されますが、場合に備えて、append() メソッドは追加されたノードを返しますが、appendChildI() メソッドはコンテンツを返しません。 append() メソッドを使用すると、一度に複数の要素を追加できますが、

appendChild()

メソッドでは、一度に 1 つの要素しか追加できません。

＃＃＃のように＃＃＃ リーリー

これは と同じ仕事をします リーリー

append()

メソッドを使用すると、DOMString と DOMNodes の両方を親要素に追加できますが、この場合は appendChild()method## のみです。 # DOMNodes

は親要素にアタッチできます。

以上が、文字列から要素を作成する方法の一部です。

以上がJavaScript で文字列から要素を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。