jQuery-DOM操作之复制替换包裹节点

Posted 2020-09-18 影子疯

1、复制节点

clone()

$(function(){
            $(‘ul li‘).click(function() {
                $(this).clone().appendTo(‘ul‘);  //复制当前单击的节点，并将它追加到ul元素中
            });
});

复制节点后，被复制的新元素并不具有任何行为，如果需要新元素也具有复制功能，需要给clone()传递参数true，clone(true).true的含义是复元素并复制元素所绑定的事件

$(function(){
            $(‘ul li‘).click(function() {
                $(this).clone(true).appendTo(‘ul‘);  //复制当前单击的节点（绑定了clone()事件），并将它追加到ul元素中
            });
});

2、替换节点

replaceWith()

replaceAll()

$(function(){
            $(‘p‘).replaceWith(‘<span>你最不喜欢的水果是？</span>‘)  //span元素替换p元素
            $("<span>你最不喜欢的水果是？</span>").replaceAll(‘p‘) //span元素替换p元素
});

3、包裹节点

wrap()--有多个标签，每个标签都会被一个标签包裹

$(function(){
            $(‘p‘).wrap(‘<div></div>‘);  //用div标签把strong标签包裹起来
});

wrapAll()--有多个标签，所有的标签被一个标签包裹

wrapInner()

$(function(){
            $(‘p‘).wrapInner(‘<b></b>‘);//b标签包裹p标签里面的子内容，包括文本节点。<p title="选择你最喜欢的水果."><b>你最喜欢的水果是？</b></p>
});