Javascriptを追加する

appendChild()JavaScriptメソッドは、ノードの最後に要素を追加します。 appendChild()は、多くの場合、要素をリストに追加するために使用されます。ノードに複数のアイテムを追加する場合は、複数のappendChild()ステートメントを使用する必要があります。

一部のリストにはテキストが含まれています。他のディレクトリには画像が含まれています。他のリストには、カスタムWebアイテムが含まれています。リストの内容に関係なく、確かなことが1つあります。Webページはリストでいっぱいです。

リストを作成するときは、通常、その値をHTMLでエンコードします。このプロセスは、JavaScript appendChildと呼ばれるメソッドを使用して高速化できます。このメソッドを使用すると、リストの最後にアイテムを追加したり、ブロッククォートなどの他のWebアイテムを追加したりできます。

このガイドでは、 appendChild ( )はJavaScriptであり、どのように機能するか。開始するための例を見ていきます。始めましょう!

appendChildJavaScriptとは何ですか?

appendChild()は、親ノードの最後にノードを追加します。 appendChild()は通常、HTMLリストにアイテムを追加するために使用されます。ノードは、HTMLドキュメントオブジェクトモデル(DOM)の任意の要素を参照します。

appendChild ()の構文は次のようになります。

「親」とは、子を追加する要素を指します。 「子」は、親の最後に追加するアイテムです。

JavaScript getElementById()または別の「Get」を使用して要素を取得します。または、JavaScriptでHTML要素を作成し、その要素をappendChild()を使用して「親」オブジェクトとして使用することもできます。

たとえば、スコーンのレシピのリストは次のようになります。ノードのリストが含まれています。これらのノードは、おそらく

  • リストを作成するためです。

    タグを含む親

  • フロントエンドの設定

    まず、基本的なインターフェイスを表示します。学生名のリスト。index.htmlというファイルを開き、次のコードを貼り付けます。

    基本的なHTMLドキュメントを作成しました。このドキュメントには、タイトルとサブ要素のないリストが含まれています。リストは

      タグで表されます。

      次に追加しましょう。私たちのウェブページの美学を改善するためのstyles.cssと呼ばれるファイルの私たちのページへのいくつかのスタイルge:

      このCSSルールは、ページの背景色を明るい灰色で定義します。これを行うには、CSSbackground-colorプロパティを使用します。また、 タグのコンテンツをページの中央に移動します。レイアウトの構造について詳しくは、CSSボックスモデルガイドをご覧ください。

      ページがまだ機能していません。リストには何も追加していません。これは何をブラウザで開いたときのようなページのルックスます:

      <フィギュアクラス=「WP-画像圏」> 53h1N2e2JcTmRTZIFItMB6Lz9mFISGZQ CP6OkNpEvNsAmFR5uykmTYLkS1F50UOokk62H14EHqSN4LOq0f3eGcfshnlat block-codemirror-blocks-code-block code- block
       const student = document.querySelector(" ul "); 

    このコード行は、タグが付いたページ

      これはリストを表します。次に、リストに追加するアイテムを作成します:

      T彼のコードは、「Steven」という単語を含む

    • タグを持つテキストノードを作成します。次に、新しく作成したアイテムをリストに追加する必要があります。

    JavaScriptのappendChild()メソッドの使用

    appendChild ()を使用すると、ノードに要素を追加します。scripts.jsファイルの下部にある次のコード:

    これにより、前に作成したリストアイテムがリストに追加されます。Webページを開いて結果を確認しましょう。

    PPX9hW Qztc6gNJKNyOeRE2U6hg08YNO H0wIbQGGo9MfA90aFLp A7RDQ8 PsqdHEh6mSG OcHJeDB3efXaFHwI9Fa9DUKqkBjA7qzYk49xSJgps8C2vXIrS0sUxDOoDhiw TGS

    私たちのリストは今あります一部、私たちはリストに要素を追加する関数を作成することで、コードをより効率的にすることができます。これにより、以前の createElementコードを繰り返すことなく要素を追加できます。

    createElementtextContent次のようなコード行:

    この関数は、呼び出されるたびに新しい

  • 要素を作成します。次に、次の関数を使用するように appendChild ()ステートメントを変更します。

    これにより、Mark、Chloe、Louiseの3人の生徒が作成されます。 index.htmlファイルをもう一度開いて、変更が加えられているかどうかを確認しましょう。