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