JQuery學習筆記-新增元素
阿新 • • 發佈:2018-11-22
在這裡,介紹4個常用的方法:
- append():在被選元素的結尾插入內容(仍然是元素內部);
- prepend():在被選元素的開頭插入內容(仍然是元素內部);
- after():在被選元素之後插入內容;
- before():在被選元素之前插入內容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜鳥教程</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> </style> <script> $(document).ready(function() { $("#btn1").click(function() { var txt1 = "<p>文字</p>"; var txt2 = $("<p></p>").text("文字"); var txt3 = document.createElement("p"); txt3.innerHTML = "文字"; $("body").append(txt1, txt2, txt3); }); $("#btn2").click(function(){ var txt4 = "<b>文字</b>"; var txt5 = "<strong>文字</strong>"; $("p").after(txt4,txt5); }); }); </script> </head> <body> <p>這是一個段落。</p> <br> <button id="btn1">追加文字</button> <button id="btn2">追加文字</button> </body> </html>