jquery可以為頁面新增元素。新增方法:1、利用「元素物件.append("插入內容")」在元素的結尾加入元素;2、利用「元素物件.prepend("插入內容")」在元素的開頭加上元素;3、利用「元素物件.after("插入內容")」在被選元素後加入元素;4、利用「元素物件.before("插入內容")」在被選元素後加入元素。
本教學操作環境: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可以為頁面添加元素嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!