这篇文章主要介绍“jquery追加元素的方法有哪些”，在日常操作中，相信很多人在jquery追加元素的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jquery追加元素的方法有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
append() 方法
append()方法在被选元素的结尾（在内部）插入指定内容。
$("p").append(" <b>Hello world!</b>");appendTo() 方法
appendTo() 方法在被选元素的结尾（在内部）插入指定内容，与append()方法作用一样。
$("<b>Hello World!</b>").appendTo("p");prepend() 方法
prepend() 方法在被选元素的开头（在内部）插入内容。
$("p").prepend("Some prepended text.");after() 方法
after() 方法在被选元素之后（在外面）插入内容。
$("p").after("<p>Hello world!</p>");before() 方法
before() 方法在被选元素之前（在外面）插入内容。
$("img").before("Some text before");还可以使用FOR循环进行动态变化的元素的追加；
<script>//循环追加动态元素var nll= $('.topnav>li').length;for(var i=1;i<=nll;i++){$('.topnav>li:nth-child('+i+')>a').append(i);}</script>wrap() 方法
wrap() 方法可以给某个元素添加父元素包裹。
$(".ftmeau a").wrap('<span>');CSS3中的before和after伪类
除了使用JQUERY追加元素之外，还可以使用CSS3中的before和after伪类来追加素材；
.topnav li:nth-child(1) a:before{content:url(images/iconnav01.png);}晋级知识扩展
before和insertBefore
二者效果相同，只不过语法不一样，写法不同
$(content).insertBefore(selector)
$(selector).before(content);
| 参数 | 描述 |
|---|---|
| content | 必需。规定要插入的内容（必须包含 HTML 标签）。 注意：如果 content 是已存在的元素，它将从它的当前位置被移除，并被插入在被选元素之前。 |
| selector | 必需。规定在何处插入内容。 |
<div id="content" >我是原来的content</div><script src="./jquery-1.11.1.js"></script><script> $("#content").before("<span>我是新插入的元素</span>") //或者用insertBefore,二者效果相同，只不过写法不同 //$("<span>我是新插入的元素</span>").insertBefore("#content")</script> //语句执行后的HTML结构如下<span>我是新插入的元素</span><div id="content" >我是原来的content</div>after和insertAfter
after和insertAfter同上before和insertBefore，只是位置不同
append和appendTo
append和appendTo 同上before和insertBefore，只是位置不同
插入已有元素
insertBefore() 方法在每个被选元素前插入一个已有元素。
appendTo() 方法在每个被选元素的结尾插入已有的元素。
<script>$(document).ready(function(){ $("#test1").click(function(){$("h2").appendTo("p"); }); $("#test2").click(function(){$("h3").insertBefore("div"); }); $("#test3").click(function(){$("h4").insertAfter("p"); }); });</script><h2>这是一个标题</h2><h3>这是一个标题2</h3><h4>这是一个标题3</h4><p>这是一个段落。</p><div>这是另一个段落。</div><button id="test1">移除现h2元素并在P元素结尾插入h2元素</button><button id="test2">移除h3元素并在div元素之前插入它</button><button id="test3">移除h4元素并在P元素后面插入它</button>添加若干新元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
<script>function fangfa(){var txt1="<b>I </b>"; // 使用 HTML 创建元素var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素var txt3=document.createElement("big"); // 使用 DOM 创建元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3); // 在图片后添加文本$("img").before(txt1,txt2,txt3); // 在图片后添加文本$("div").append(txt1,txt2,txt3); // div后追加新元素$("div").prepend(txt1,txt2,txt3); // div前追加新元素}</script><p>第一行</p><img src="/images/logo2.png" ><div>第三行</div><button onclick="fangfa()">之后插入</button>到此，关于“jquery追加元素的方法有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
