JS でノードを作成および追加する方法の詳細な図による説明-jsチュートリアル-php.cn

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

yulia

リリース： 2018-10-09 10:18:32

オリジナル

20558 人が閲覧しました

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 でノードを作成および追加する方法の詳細な図による説明