Jquery6 DOM 節點操作

2022-05-08 03:57:12 字數 2954 閱讀 5471

dom 中有乙個非常重要的功能，就是節點模型，也就是 dom 中的「m」。頁面中的元素結構就是通過這種節點模型來互相對應著的，通過這些節點關係，可以建立、插入、替換、轉殖、刪除等等一些列的元素操作。

為了使頁面更加智慧型化，有時想動態的在 html 結構頁面新增乙個元素標籤，那麼在插入之前首先要做的動作就是：建立節點。

var box = $('節點


'); //


建立乙個節點


將節點插入到元素內部


向 div 內部插入 strong 節點


使用匿名函式插入節點，html 是原節點


return '節點';


});講 span 節點移入 div 節點內


同上$('div').prepend('節點'); //


將 span 插入到 div 內部的前面


使用匿名函式，同上


return '節點';


});$('span').prependto('div'); //


將 span 移入 div 內部的前面


$('span').prependto($('div')); //


同上


$('div').after('節點'); //


向 div 的同級節點後面插入 span


$('div').after(function (index, html) );


$('div').before('節點'); //


向 div 的同級節點前面插入 span


$('div').before(function (index, html) );


$('span').insertafter('div'); //


將 span 元素移到 div 元素外部的後面


$('span').insertbefore('div'); //


將 span 元素移到 div 元素外部的前面


jquery 提供了一系列方法用於包裹節點，那包裹節點是什麼意思呢？其實就是使用字串**將指定元素的**包含著的意思。


在 div 外層包裹一層 strong


$('div').wrap('123'); //


包裹的元素可以帶內容


$('div').wrap(''); //


包裹多個元素


$('div').wrap($('strong').get(0)); //


也可以包裹乙個原生 dom


$('div').wrap(document.createelement('strong')); //


臨時的原生 dom


$('div').wrap(function (index) );


$('div').unwrap(); //


移除一層包裹內容，多個需移除多次


$('div').wrapall(''); //


所有 div 外面只包一層 strong


$('div').wrapall($('strong').get(0)); //


同上$('div').wrapinner(''); //


包裹子元素內容


$('div').wrapinner($('strong').get(0)); //


dom 節點


$('div').wrapinner(function () );
注意：.wrap()和.wrapall()的區別在前者把每個元素當成乙個獨立體，分別包含一層外層；後者將所有元素作為乙個整體作為乙個獨立體，只包含一層外層。這兩種都是在外層包含，而.wrapinner()在內層包含。

除了建立、插入和包裹節點，jquery 還提供了一些常規的節點操作方法：複製、替換和刪除節點。

//


複製節點


複製乙個節點新增到 html 中
注意：clone(true)引數可以為空，表示只複製元素和內容，不複製事件行為。而加上 true引數的話，這個元素附帶的事件處理行為也複製出來。

//


刪除節點


$('div').remove(); //


直接刪除 div 元素
注意：.remove()不帶引數時，刪除前面物件選擇器指定的元素。而.remove()本事也可以帶選擇符引數的，比如：$('div').remove('#box');只刪除 id=box 的 div。

//


保留事件的刪除節點


$('div').detach(); //


保留事件行為的刪除
注意：.remove()和.detach()都是刪除節點，而刪除後本身方法可以返回當前被刪除的節點物件，但區別在於前者在恢復時不保留事件行為，後者則保留。

//


清空節點


$('div').empty(); //


刪除掉節點裡的內容


//替換節點


$('div').replacewith('節點'); //


將 div 替換成 span 元素


$('節點').replaceall('div'); //


同上
注意：節點被替換後，所包含的事件行為就全部消失了。

Jquery操作DOM節點

1 向dom節點中追加元素 結果 我想說 你好 結果 我想說 你好 prepend 向每個匹配元素內部前置元素 例如 我想說 p prepend 你好 結果 你好我想說 prependto 將所有匹配的元素前置到指定的元素中 例如 我想說 你好 prependto p 結果 你好我想說 after ...

jQuery操作DOM節點

dom 節點建立的過程 建立節點 元素 屬性 文字等 新增節點的屬性 加入到文件中 jquery建立節點的方法 建立元素節點 建立文字節點 直接將文字的內容新增進去 建立節點並給節點新增屬性 var div 動態建立div元素節點 節點建立完成。需要將節點新增到文件中，新增新內容的時候需要用到接下來...

jQuery基礎 DOM節點操作

如 p id name a href p 增加環繞節點 方法說明 wrap 用指定結構的元素包裹元素 wrapall 用指定結構的元素包裹多個元素 wrapinner 用指定結構元素包裹元素的內容 節點內部插入 方法說明 向每個匹配元素內部的最後面新增元素 將所有匹配的元素追加到指定的元素中 pre...