DOM节点操作

请尊重知识，请尊重原创更多资料参考请见

http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1

一、创建节点和插入节点
var div1=$('<div id="div1">节点</div>');//创建节点
$('body').append(div1); //插入节点

$('div').append(function(index,html){
return '你好吗'+index+html;//匿名函数返回值插入节点。html为原节点
});
向元素内部插入节点：append、appendTo、prepend、prependTo
区别：
append为追加到后面；prepend为插到前面。
append为在哪里插入什么（主动）；appendTo为将什么插到哪里（被动）。

向元素外部插入节点：after、before、insertAfter、insertBefore
同理：after和insertAfter的区别，一个是主动，一个是被动。

二、插入节点
$('div').wrap(''); //在 div 外层包裹一层 strong
$('div').wrap('123'); //包裹的元素可以带内容
$('div').wrap(''); //包裹多个元素
$('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM
$('div').wrap(document.createElement('strong')); //临时的原生 DOM
$('div').wrap(function (index) { //匿名函数
return '';
});
$('div').unwrap(); //移除一层包裹内容，多个需移除多次
$('div').wrapAll(''); //所有 div 外面只包一层 strong
$('div').wrapAll($('strong').get(0)); //同上
$('div').wrapInner(''); //包裹子元素内容
$('div').wrapInner($('strong').get(0)); //DOM 节点
$('div').wrapInner(function () { //匿名函数
return '';
});
注意：.wrap()：分别包含每个元素；
.wrapAll():把所有元素当成一个整体再包含。

$('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中。带参数true说明复制行为click等，不带true就不带行为。
$('div').remove(); //直接删除 div 元素,连行为也删除了
$('div').remove('.box'); //只删除class为box的div。
$('div').detach(); //保留事件行为的删除

$('div').empty();//清空节点里的内容
$('div').replaceWith('haha');//用span替换掉div
$('haha').replaceAll('div');//同上,节点被替换后，所包含的事件行为也都消失了。

巴特西

DOM节点操作

最新文章

热门文章