碼上快樂

相關內容    簡體    繁體

jquery 插入節點的方法

本文轉載自   查看原文   2016-08-29 13:55   7899    jQuery
方法 描述 示例
append() 向每個匹配的元素內部追加內容

HTML代碼：

<p>我想說：</p>

jQuery代碼：

$("p").append("<b>你好</b>")

結果：

<p>我想說：<b>你好</b></p>
appendTo()

將所有匹配的元素追加到指定的元素中。

實際上，使用該方法是顛倒了常規的

$(A).append(B)的操作，即不是將B追加到

A中，而是將A追加到B中

HTML代碼：

<p>我想說：</p>

jQuery代碼：

$("<b>你好</b>").appendTo("p")

結果：

<p>我想說：<b>你好</b></p>
prepend() 向每個匹配的元素內部前置內容

HTML代碼：

<p>我想說：</p>

jQuery代碼：

$("p").prepend("<b>你好</b>")

結果：

<p><b>你好</b>我想說：</p>
prependTo()

將所有匹配的元素前置到指定的元素中。

實際上，使用該方法是顛倒了常規的

$(A).prepend(B)的操作，即不是將B前置到

A中，而是將A前置到B中

HTML代碼：

<p>我想說：</p>

jQuery代碼：

$("<b>你好</b>").prependTo("p")

結果：

<p><b>你好</b>我想說：</p>
after() 在每個匹配的元素之后插入內容

HTML代碼：

<p>我想說：</p>

jQuery代碼：

$("p").after("<b>你好</b>")

結果：

<p>我想說：</p><b>你好</b>
insertAfter()

將所有匹配的元素插入到指定元素的后面。

實際上，使用該方法是顛倒了常規的

$(A).after(B)的操作，即不是將B插入到A

后面，而是將A插入到B后面

HTML代碼：

<p>我想說：</p>

jQuery代碼：

$("<b>你好</b>").insertAfter("p")

結果：

<p>我想說：</p><b>你好</b>
before() 在每個匹配的元素之前插入內容

HTML代碼：

<p>我想說：</p>

jQuery代碼：

$("p").before("<b>你好</b>")

結果：

<b>你好</b><p>我想說：</p>
insertBefore()

將所有匹配的元素插入到指定的元素的前面。

實際上，使用該方法是顛倒了常規的

$(A).before(B)的操作，即不是將B插入

到A前面，而是將A插入到B前面

HTML代碼：

<p>我想說：</p>

jQuery代碼：

$("<b>你好</b>").insertBefore("p")

結果：

<b>你好</b><p>我想說：</p>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jQuery節點的添加和插入 jQuery中的查找節點、創建節點、插入節點、刪除節點、替換節點、復制節點操作方法 jQuery獲取節點和子節點文本的方法 使用JQuery獲取節點與其子節點的方法 jQuery遍歷節點方法匯總 jQuery對DOM節點進行操作(插入節點之在元素內部插入) JS appendChild()和insertBefore()方法：插入新節點 jQuery 獲取當前節點的html包含當前節點的方法 jQuery的父，子，兄弟節點查找方法 jquery中選取兄弟節點的方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM