jQuery DOM節點操作
一、創建節點
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節點操作