几乎所有网站的开发都离不开jQuery，jQuery可以很方便的实现网页中的一些效果，也很轻松的对网页中的一些DIV元素进行添加，修改或删除的操作。由于不同位置追加元素的代码不一样，本文实例讲解如何对网页中某个指定的DIV进行元素的追加操作。
append() 方法
append()方法在被选元素的结尾（在内部）插入指定内容。
$("p").append(" Hello world!");
appendTo() 方法
appendTo() 方法在被选元素的结尾（在内部）插入指定内容，与append()方法作用一样。
$("Hello World!").appendTo("p");
prepend() 方法
prepend() 方法在被选元素的开头（在内部）插入内容。
$("p").prepend("Some prepended text.");
after() 方法
after() 方法在被选元素之后（在外面）插入内容。
$("p").after("Hello world!
");
before() 方法
before() 方法在被选元素之前（在外面）插入内容。
$("img").before("Some text before");
还可以使用FOR循环进行动态变化的元素的追加；
wrap() 方法
wrap() 方法可以给某个元素添加父元素包裹。
$(".ftmeau a").wrap('');
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 | 必需。规定在何处插入内容。 |
我是原来的content//语句执行后的HTML结构如下 我是新插入的元素我是原来的content
after和insertAfter
after和insertAfter同上before和insertBefore，只是位置不同
append和appendTo
append和appendTo 同上before和insertBefore，只是位置不同
插入已有元素
insertBefore() 方法在每个被选元素前插入一个已有元素。
appendTo() 方法在每个被选元素的结尾插入已有的元素。
这是一个标题
这是一个标题2
这是一个标题3
这是一个段落。
这是另一个段落。
添加若干新元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
第一行
第三行
总结：
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
到此这篇关于jquery追加元素的所有方法全面深入实例讲解（append、prepend、after、before、wrap等等）的文章就介绍到这了,更多相关jquery追加元素的所有方法实例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！