jQuery DOM節點的插入

2021-07-11 16:32:11 字數 1317 閱讀 3917

本文**慕課網

動態建立的元素是不夠的,它只是臨時存放在記憶體中,最終我們需要放到頁面文件並呈現出來。那麼問題來了,怎麼放到文件上?

這裡就涉及到乙個位置關係,常見的就是把這個新建立的元素,當作頁面某乙個元素的子元素放到其內部。針對這樣的處理,jquery就定義2個操作的方法

簡單的總結就是:

節點與節點之前有各種關係,除了父子,祖輩關係,還可以是兄弟關係。之前我們在處理節點插入的時候,接觸到了內部插入的幾個方法,這節我們開始講外部插入的處理,也就是兄弟之間的關係處理,這裡jquery引入了2個方法,可以用來在匹配i的元素前後插入內容

選擇器的描述:

選擇器

描述

.after( content )

在匹配元素集合中的每個元素後面插入引數所指定的內容,作為其兄弟節點

.before( content )

據引數設定,在匹配元素的前面插入內容

注意點:

選擇器的描述:

選擇器

描述

prepend

向每個匹配的元素內部前置內容

prependto

把所有匹配的元素前置到另乙個指定的元素集合中

通過右邊**可以看到prepend與prependto的使用及區別:

.prepend()和.prependto()實現同樣的功能,主要的不同是語法,插入的內容和目標的位置不同

對於.prepend() 而言,選擇器表示式寫在方法的前面,作為待插入內容的容器,將要被插入的內容作為方法的引數

而.prependto() 正好相反,將要被插入的內容寫在方法的前面,可以是選擇器表示式或動態建立的標記,待插入內容的容器作為引數。

這裡總結下內部操作四個方法的區別:

prepend()向每個匹配的元素內部前置內容

prependto()把所有匹配的元素前置到另乙個指定的元素集合中

與內部插入處理一樣,jquery由於內容目標的位置不同,然增加了2個新的方法insertafter與insertbefore

選擇器

描述

insertbefore

在目標元素前面插入集合中每個匹配的元素

insertafter

在目標元素後面插入集合中每個匹配的元素

注意事項:

JQuery DOM節點操作

1.建立 移動節點 var box 建立節點 return html代表原本裡面的內容 div prepend 插入節點,插入到內容的前面 div prepend function index,html return html代表原本裡面的內容 box.prependto body 插入的內容前面 ...

jQuery Dom節點操作

1.jquery追加標籤 c css font size 100px 2.移除標籤 c remove 3.新增父級標籤,在某個標籤的外層新增標籤 c wrap 4.在某個標籤之前新增標籤 c before 我是before新增的標籤 5.在某個標籤之後新增標籤 c after 我是after新增的標...

jQuery DOM節點操作

函式 處理 函式處理,函式處理 html結構 jquery建立的節點是乙個jquery物件 總結 這兩個方法功能相同,主要的不同是語法 內容和目標的位置不同 2 prepend 與prependto 方法 prepend content 向每個匹配的元素內部前置內容 prependto conten...