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-添加元素
原文地址：https://www.cnblogs.com/xianya/p/9852601.html