JS でノードを作成および追加する方法の詳細な図による説明

yulia
リリース: 2018-10-09 10:18:32
オリジナル
20544 人が閲覧しました

JavaScript はフロントエンド開発でよく使用されますが、JS を使用して子ノードを追加する方法をご存知ですか?この記事では、JS でノードを作成および追加する方法について説明します。興味のある方は参考にしていただければ幸いです。

新しい要素を HTML DOM に追加するには、まずノード (つまり要素) を作成し、それを追加する必要がある場所に追加する必要があります。

ノードを追加する鍵となるのは、子ノードの末尾に新しい子ノードを追加できる appendChild() メソッドを使用することです。

例: リストには古代の 4 人の美女のうち 3 人が表示され、「追加」ボタンをクリックして、王昭君をリストに最後のノードとして追加します。

手順の詳細な説明

最初のステップは、createElement
var node=document.createElement("li" を使用して新しい

  • 要素を作成することです。 )

    2 番目のステップでは、

  • 要素にコンテンツがあるため、createTextNode を使用してテキスト ノードを作成する必要があります
    var textnode=document.createTextNode("Wang Zhaojun")

    ステップ 3、appendChild を使用してテキスト ノードを

  • 要素に追加します
    node.appendChild(textnode)

    ステップ 4、作成したノードを指定した場所に追加します
    var element= document.getElementById("myList") は既存の要素を検索します
    element.appendChild(node) 新しい要素を既存の要素に追加します

    完全なコードは次のとおりです。

    HTML 部分:

    <body>
      <ul id="myList">
       <li>杨玉环</li>
       <li>西施</li> 
       <li>貂蝉</li> 
      </ul>
      <p>单击按钮将项目添加到列表中</p>
      <button onclick="myFunction()">点击添加</button>
     </body>
    ログイン後にコピー

    JavaScript 部分:

    <script type="text/javascript">
      function myFunction(){
       var node=document.createElement("li");
       var textnode=document.createTextNode("王昭君");
       node.appendChild(textnode);
       document.getElementById("myList").appendChild(node);
      }
     </script>
    ログイン後にコピー

    レンダリング:

    JS でノードを作成および追加する方法の詳細な図による説明JS でノードを作成および追加する方法の詳細な図による説明

    #最初の画像ノードを追加しない場合の効果です。2 番目の図は、HTML に Wang Zhaojun を追加してノードを追加した後の効果です。

    上記は、JS でのノードの作成と追加の方法を紹介したもので、初心者でも簡単に試すことができます。関連チュートリアルの詳細については、

    JavaScript ビデオ チュートリアル
    をご覧ください。

  • 以上がJS でノードを作成および追加する方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート