几乎所有网站的开发都离不开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添加元素jq 动态追加元素 append、prepend 和 before、after

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添加元素jq 动态追加元素 append、prepend 和 before、after

JQuery中的after() 方法

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

语法

$(selector).after(content)

举例代码

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

结果,如下图

JQuery添加元素jq 动态追加元素 append、prepend 和 before、after

JQuery中的before()方法

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

语法

$(selector).before(content)

举例代码

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

结果,如下图

JQuery添加元素jq 动态追加元素 append、prepend 和 before、after

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