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

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

JQuery中的append()方法

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

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

语法：$(selector).append(content)

举例代码

这里一个DIV

var html = '

这里是要追加DIV

';

$('#mochu').append(html);

结果，如下图：

JQuery中的prepend()方法

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

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

语法：$(selector).prepend(content)

举例代码

这里一个DIV

var html = '

这里是要追加DIV

';

$('#mochu').prepend(html);

结果，如下图

JQuery中的after() 方法

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

语法$(selector).after(content)

举例代码

这里一个DIV

var html = '

这里是要追加DIV

';

$('#mochu').after(html);

结果，如下图

JQuery中的before()方法

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

语法$(selector).before(content)

举例代码

这里一个DIV

var html = '

这里是要追加DIV

';

$('#mochu').before(html);

结果，如下图

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