ホームページ > 記事 > ウェブフロントエンド > jQuery を使用してノードを作成および追加する方法の詳細な図による説明
jQuery を使用してノードを作成および追加する方法の詳細な図による説明
- yuliaオリジナル
- 2018-10-12 14:41:374490ブラウズ
jQuery は JavaScript をベースにしたフレームワークで、そのシンプルさと利便性から広く使用されています。jQuery でノードを作成および追加する方法をご存知ですか?この記事では、jQuery を使用してノードを作成し、ノードを追加する方法について説明します。これには特定の参照値があり、興味のある友人はそれを参照できます。
#注: jQuery を使用する場合は、まず jQuery ファイル
# を導入する必要があります。 ##メソッド 1、append() メソッドappend() はノードを追加し、選択した要素の最後に追加できます
例: ドラゴン フルーツを要素の最後に追加します。順序なしリスト この項目
説明: まず、
- ノードに追加します。コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>榴莲</li>
<li>西瓜</li>
<li>橘子</li>
<li>雪梨</li>
</ul>
<button id="btn">点击添加</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("ul").append(" <li>火龙果</li>");
});
});
</script>
</html>効果は図に示すとおりです:
prepend() メソッドは、選択した要素の先頭に追加されるノードを追加できます。
例: ドラゴン フルーツを順序なしリストの最初の要素として追加します
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>榴莲</li>
<li>西瓜</li>
<li>橘子</li>
<li>雪梨</li>
</ul>
<button id="btn">点击添加</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("ul").prepend(" <li>火龙果</li>");
});
});
</script>
</html>結果は図に示すとおりです:
さらに、after() メソッドと before() メソッドがあります。方法。 jQuery の after() メソッドは選択した要素の後にコンテンツを挿入し、before() メソッドは選択した要素の前にコンテンツを挿入します。本質は append() および prepend() と似ているため、ここでは説明しません。 
上記は、jQuery でノードを作成し、ノードを追加する方法を紹介しています。興味のある方は、after() メソッドと before() メソッドをすぐにマスターできると思います。できるだけ。関連チュートリアルの詳細については、
以上がjQuery を使用してノードを作成および追加する方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。