1. 程式人生 > >jQuery DOM節點操作

jQuery DOM節點操作

使用 strong cti html ndt pty index all taf

一、創建節點

var box = $(‘<div id =box>節點</div>‘); //創建一個節點

$(‘body‘).appended(box);      //將節點插入<body>元素內部

二、插入節點

內部插入節點方法

append(content)         向指定元素後面插入節點content

append(function (index,hml) {})    使用匿名函數向指定元素後面插入節點content(html是原節點)

appendTo(content)        將指定元素移入到指定元素content內部後面

prepend(content)         向指定元素前面插入節點content

prepend(function (index,html) {})  使用匿名函數向指定元素前面插入節點content

prependTo(content)        將指定元素移入到指定元素content內部前面

外部插入節點方法

after(content)向指定元素的外部後面插入節點content

after(function(index,html) {}) 使用匿名函數向指定元素的外部插入節點content

before(content)向指定元素外部前面插入節點content

before(function(index,html) {})使用匿名函數向指定元素前面插入節點content

insertAfter(content)將指定節點移到指定節點元素content外部後面

insertBefore(content)將指定節點移到指定節點元素content外部前面

三、包裹節點

wrap(html)          向指定元素包裹一層html代碼

wrap(element)        向指定元素包裹一層DOM對象節點 $(‘div‘).wrap(document.createElement(‘strong‘));

wrap(function (index) {})    使用匿名函數向指定元素包裹一層自定義內容

unwrap()           移除一層指定元素包裹的內容

wrapAll(html)         用html講所有元素包裹到一起

wrapAll(element)        用DOM對象將所有元素包裹在一起

wrapInner(html)        向指定元素的子內容包裹一層html

wrapInner(elelment)      向指定元素的子內容包裹一層DOM對象節點

wrapInner(function (index) {})  用匿名函數向指定元素的子內容包裹一層

四、節點操作

//復制節點

$(‘body‘).append($(‘div‘).clone(ture)); //復制一個節點添加到HTML中

clone(true)參數可以為空表示只復制元素和內容,不復制事件行為。而加上true就可以復制事件行為。

//刪除節點

$(‘div‘).remove(); //直接刪除div元素

remove()不帶參數時,刪除前面指定元素。也可以帶選擇符參數,如$(‘div‘)remove(‘#box‘),只刪除id=box的div。

//保留事件的刪除節點

$(‘div‘).detach(); //保留事件行為的刪除

刪除後本身方法可以返回當前被刪除的節點對象。

//清空節點

$(‘div‘).empty(); //刪除節點裏的內容。

//替換節點

$(‘div‘).replaceWith(‘<span>節點</span>‘); //將div替換成span元素

$(‘<span>節點</span>‘).replaceAll(‘div‘); //同上

節點被替換後,所包含的事件行為就全部消失。

jQuery DOM節點操作