jQuery和JavaScript節(jié)點(diǎn)插入元素的方法對比
二、插入元素:
<div> <p>面朝大海,春暖花開</p> </div>
(一)、jQuery方法
1、在節(jié)點(diǎn)內(nèi)部插入:
方法 |
說明 |
append() |
向每個(gè)匹配的元素內(nèi)部追加內(nèi)容 |
appendTo() |
把所有的元素追加到另一個(gè)指定的元素集合中,實(shí)際上是顛倒了append()的用法。如$(A).append(B)與$(B).appendto(A)是等價(jià)的 |
prepend() |
向每個(gè)匹配的元素內(nèi)部前置內(nèi)容 |
prependTo() |
把所有匹配的元素前置到另一個(gè)指定的元素集合中。實(shí)際上是顛倒了preprend()的用法。如$(A).prepend(B)與$(B).prenpendTo(B)等價(jià) |
具體實(shí)現(xiàn)如下:
$("div").append("<p>這是append()方法添加的內(nèi)容</p>");//在div元素下第一個(gè)子節(jié)點(diǎn)位置插入段落 $("div").prepend("<p>這是prepend()方法添加的內(nèi)容</p>");//在div元素下最后一個(gè)子節(jié)點(diǎn)位置插入段落
下面這兩種方法更符合人的一般思維,但效果是一樣的
$("<p>這是appendTo方法添加的內(nèi)容</p>").appendTo("div");//把段落插到div元素的第一個(gè)子節(jié)點(diǎn)位置 $("<p>這是prependTo方法添加的內(nèi)容</p>").prependTo("div");//把段落插到div元素的最后一個(gè)子節(jié)點(diǎn)位置
2、在節(jié)點(diǎn)外部插入:
方法 |
說明 |
after() |
在每個(gè)匹配的元素之后插入內(nèi)容 |
before() |
在每個(gè)匹配的元素之前插入內(nèi)容 |
insertAfter() |
把所有匹配的元素插入到另一個(gè)指定的元素集合的后面 |
insertBefore() |
把所有匹配的元素插入到另一個(gè)指定的元素集合的前面 |
具體實(shí)現(xiàn)如下:
$("div").after("<p>這是after()方法添加的內(nèi)容</p>");//在div元素后面插入段落 $("div").before("<p>這是before()方法添加的內(nèi)容</p>");//在div元素前面插入段落
$("div").after("<p>這是after()方法添加的內(nèi)容</p>");//在div元素后面插入段落 $("div").before("<p>這是before()方法添加的內(nèi)容</p>");//在div元素前面插入段落
3、appendTo(),prependTo(), insertBefore(),insertAfter() 方法具有破壞性操作特性,也就是如果選擇已經(jīng)存在內(nèi)容,并把它們插入到指定對象中時(shí),則原位置的內(nèi)容將被刪除。下面實(shí)例中將原div元素中包含的段落文本選中并移到div元素后面。演示如下:
$("p").insertAfter("div");
(二)、JavaScript方法
1、在節(jié)點(diǎn)內(nèi)部插入:appendChild()—--對應(yīng)于jQuery的append(), insertBefore()---對應(yīng)于jQuery中的prepend()
具體效果請看上面jQuery方法。。。
2、自定義JavaScript擴(kuò)展DOM功能函數(shù)================待續(xù)~待續(xù)~待續(xù)
以上就是本文內(nèi)容,希望對大家有所幫助,謝謝對腳本之家的支持!
- javascript與jquery動(dòng)態(tài)創(chuàng)建html元素示例
- js jquery獲取當(dāng)前元素的兄弟級 上一個(gè) 下一個(gè)元素
- js與jquery獲取父元素,刪除子元素的兩種不同方法
- JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法
- js與jquery獲取父級元素,子級元素,兄弟元素的實(shí)現(xiàn)方法
- jQuery下實(shí)現(xiàn)等待指定元素加載完畢(可改成純js版)
- js jquery 獲取某一元素到瀏覽器頂端的距離實(shí)現(xiàn)方法
- JS加jquery簡單實(shí)現(xiàn)標(biāo)簽元素的顯示或隱藏
- JS Jquery 遍歷,篩選頁面元素 自動(dòng)完成(實(shí)現(xiàn)代碼)
- jquery和javascript中如何將一元素的內(nèi)容賦給另一元素
- jQuery與javascript對照學(xué)習(xí) 獲取父子前后元素 實(shí)現(xiàn)代碼
- jQuery與原生JavaScript選擇HTML元素集合用法對比分析
相關(guān)文章
webpack常用構(gòu)建優(yōu)化策略小結(jié)
這篇文章主要介紹了webpack常用構(gòu)建優(yōu)化策略小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11JavaScript函數(shù)式編程(Functional Programming)聲明式與命令式實(shí)例分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)聲明式與命令式,結(jié)合實(shí)例形式分析了JS聲明式與命令式相關(guān)概念、原理、定義及使用方法,需要的朋友可以參考下2019-05-05