幾乎所有網站的開發都離不開jQuery,jQuery可以很方便的實現網頁中的一些效果,也很輕松的對網頁中的一些DIV元素進行添加,修改或刪除的操作。今天我們就說一說,如何對網頁中某個指定的DIV進行元素的追加操作。

JQuery中的append()方法

append() 方法在被選元素的結尾(仍然在內部)插入指定內容。

国产视频app提示: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()方法

国产视频appprepend() 方法在被選元素的開頭(仍位于內部)插入指定內容。

国产视频app提示: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插件,否則代碼不會生效哦。