标签：tns on() doc ready button style 内容 ack 元素
jquery添加元素一共有四个语句:
append() 在被选元素的结尾插入内容（被选元素内部）
prepend() 在被选元素的开头插入内容（被选元素内部）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script> $(document).ready(function() { $("#btnFirst").click(function() { $("p").prepend("<b style=‘color:#FF0000‘>追加成功</b>"); }); $("#btnSecond").click(function() { $("ol").prepend("<li style=‘color:#FF0000‘>追加成功</li>"); }); // $("#btnFirst").click(function() { // $("p").append("<b style=‘color:#FF0000‘>追加成功</b>"); // }); // $("#btnSecond").click(function() { // $("ol").append("<li style=‘color:#FF0000‘>追加成功</li>"); // }); }); </script> </head> <body> <p>测试append()</p> <ol> <li>Java</li> <li>C#</li> </ol> <button id="btnFirst">追加文本</button> <button id="btnSecond">追加列表项</button> </body> </html>
after() 在被选元素之后插入内容（被选元素外部）
before() 在被选元素之前插入内容 （被选元素外部）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script> $(document).ready(function() { $("#btnFirst").click(function() { $("#targetP").after("<b style=‘color:#FF0000‘>追加成功</b>"); }); $("#btnSecond").click(function() { $("#targetOl").after("<li style=‘color:#FF0000‘>追加成功</li>"); }); // $("#btnFirst").click(function() { // $("#targetP").before("<b style=‘color:#FF0000‘>追加成功</b>"); // }); // $("#btnSecond").click(function() { // $("#targetOl").before("<li style=‘color:#FF0000‘>追加成功</li>"); // }); }); </script> </head> <body> <p id="targetP">测试append()</p> <p>测试append()</p> <ol id="targetOl"> <li>Java</li> <li>C#</li> </ol> <button id="btnFirst">追加文本</button> <button id="btnSecond">追加列表项</button> </body> </html>
标签：tns on() doc ready button style 内容 ack 元素
原文地址：https://www.cnblogs.com/xianya/p/9852601.html
