ホームページ > 記事 > ウェブフロントエンド > JS でノードを作成および追加する方法の詳細な図による説明
JS でノードを作成および追加する方法の詳細な図による説明
- yuliaオリジナル
- 2018-10-09 10:18:3320478ブラウズ
JavaScript はフロントエンド開発でよく使用されますが、JS を使用して子ノードを追加する方法をご存知ですか?この記事では、JS でノードを作成および追加する方法について説明します。興味のある方は参考にしていただければ幸いです。
新しい要素を HTML DOM に追加するには、まずノード (つまり要素) を作成し、それを追加する必要がある場所に追加する必要があります。
ノードを追加する鍵となるのは、子ノードの末尾に新しい子ノードを追加できる appendChild() メソッドを使用することです。
例: リストには古代の 4 人の美女のうち 3 人が表示され、「追加」ボタンをクリックして、王昭君をリストに最後のノードとして追加します。
手順の詳細な説明
最初のステップは、createElement
var node=document.createElement("li" を使用して新しい
2 番目のステップでは、
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 でノードを作成および追加する方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。