jQuery中几种动态追加元素的方法

几乎所有网站的开发都离不开jQuery，jQuery可以很方便的实现网页中的一些效果，也很轻松的对网页中的一些DIV元素进行添加，修改或删除的操作。今天我们就说一说，如何对网页中某个指定的DIV进行元素的追加操作。

JQuery中的append()方法

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。

语法：

$(selector).append(content)

举例代码

<div id="mochu">这里一个DIV</div>
<script>
var html = '<div>这里是要追加DIV</div>';
$('#mochu').append(html);
</script>

结果，如下图：

JQuery中的prepend()方法

prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。

提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。

语法：

$(selector).prepend(content)

举例代码

<div id="mochu">这里一个DIV</div>
<script>
var html = '<div>这里是要追加DIV</div>';
$('#mochu').prepend(html);
</script>

结果，如下图

JQuery中的after() 方法

after() 方法在被选元素后插入指定的内容。

语法

$(selector).after(content)

举例代码

<div id="mochu">这里一个DIV</div>
<script>
var html = '<div>这里是要追加DIV</div>';
$('#mochu').after(html);
</script>

结果，如下图

JQuery中的before()方法

before() 方法在被选元素前插入指定的内容。

语法

$(selector).before(content)

举例代码

<div id="mochu">这里一个DIV</div>
<script>
var html = '<div>这里是要追加DIV</div>';
$('#mochu').before(html);
</script>

结果，如下图

以上就是JQuery中几种动态添加DIV元素的方法，但注意的是一定在网页的头部引入jquery插件，否则代码不会生效哦。