jQuery-添加元素
Posted xianya
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery-添加元素相关的知识，希望对你有一定的参考价值。
jquery添加元素一共有四个语句:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
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>
以上是关于jQuery-添加元素的主要内容，如果未能解决你的问题，请参考以下文章
[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个指定的元素元素集合的前面,实现外部插入(代码片段