jquery はページに要素を追加できます。追加方法: 1.「Element Object.append("Insert Content")」で要素の最後に要素を追加する; 2.「Element Object.prepend("Insert Content")」で要素の先頭に要素を追加する要素; 3. 「Element object.after("Insert content")」を使用して、選択した要素の後に要素を追加します; 4. 「Element object.before("Insert content")」を使用して、選択した要素の後に要素を追加します。
このチュートリアルの動作環境: Windows10 システム、jquery3.4.1 バージョン、Dell G3 コンピューター。
jquery でページに要素を追加できます
append() - 選択した要素の末尾にコンテンツを挿入します。
$(selector).append(content,function(index,html))
例は次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>12</title> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>插入文本</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>插入项</li>"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另一个段落</p> <ol> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ol> <button id="btn1">插入文本</button> <button id="btn2">插入列表项</button> </body> </html>
出力結果:
prepend() - 選択した要素の先頭にコンテンツを挿入します
例は次のとおりです。
$(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend(" <b>插入文本</b>."); }); $("#btn2").click(function(){ $("ol").prepend("<li>插入项</li>"); }); });
出力結果:
after() - コンテンツの後にコンテンツを挿入します。選択された要素
$(document).ready(function(){ $("#btn1").click(function(){ $("p").after(" <b>插入文本</b>."); }); $("#btn2").click(function(){ $("ol").after("<li>插入项</li>"); }); });
出力結果:
$(document).ready(function(){ $("#btn1").click(function(){ $("p").before(" <b>插入文本</b>."); }); $("#btn2").click(function(){ $("ol").before("<li>插入项</li>"); }); });
#ビデオ チュートリアルの推奨事項:
jQuery ビデオ チュートリアル以上がjqueryでページに要素を追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。