jQuery中的节点操作

一、内部插入

prepend () 将元素添加到指定元素前边。

append ()将元素添加到指定元素后边。

二、包裹

wrap()元素包裹。

unwrap()移除元素包裹。

wrapAll()包裹全部元素。

wrapInner()移除全部元素包裹。

三、外部插入

before（）将元素添加到指定元素外部的前边。

after（）将元素添加到指定元素外部的后边。

四、替换

replaceWith和replaceAll

selector.replaceWith(“element”) 用匹配的元素替换成指定的HTML 元素。
　
$(“element”)replaceAll(selector) :方法把被选元素替换为新的 HTML 元素。

五、删除

empty() 删除元素的所有的子节点。
detach() dom会保留事件。

扫描二维码关注公众号，回复： 15533861 查看本文章

remove([) dom元素的事件删除。

六、复制

clone([Even[,deepEven]]) 参数是true false 一个参数代表两个 true 事件处理函数被复制子元素被复制。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">按钮</button>
<button class="btn  list">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
    /*
    * 内部插入
    * */
    //追加到内容之后
   var str='abc';
    //后边的参数  可以是字符串  也可以是对象
    $('.btn').append(str);
    $('<span>abc</span>').appendTo($('.btn'));*/
    //jquery里面如何创建dom

    var str='<span>123</span>';
    $(str).appendTo($('.btn'));  //前面不能是字符串*/

    $('<div></div>');


    //追加到元素的内容之前
    //prepend
    //prependTo

  var str='abc';
   $('.btn').prepend(str);
   $(str).prependTo($('.btn'));
    $('<div>123</div>').prependTo($('.btn'));

    console.log($(str));

    //jquery  里面的 匿名函数回调基本一致
    /*$('.btn').append(function (index){
            console.log(index);
        return 'abc';
    });*/

    //外部插入
    var str=$('<span>标签</span>');
    $('.btn').after(str);
    $('.btn').before(str);
    var str=$('<span>标签</span>');
    str.insertAfter($('.btn'));
    str.insertBefore($('.btn'));


    //元素包裹
    $('.btn').wrap('<div></div>');

    $('.btn').wrap($('<div></div>'));
    $('.btn').wrap(function (index){
    
    
       return $('<div></div>');
    });

    //移除包裹元素
    $('.btn').unwrap();

    $('.btn').wrap('<div></div>');
    //找到的同类元素全部包起来
    $('.btn').wrapAll('<div></div>');

    //把元素的字内容全部包起来
    $('.btn').wrapInner('<div></div>');

    //元素替换
    $('.btn').replaceWith('<div>123</div>');
    $('<div>123</div>').replaceAll($('.btn'));

    //元素克隆
    $('body').append($('.btn').clone());

    //清除所有子节点
    $('.btn').empty();
    //删除元素
    var button=$('.btn');
    button.click(function (){
    
    
        console.log(1);
    });
    button.remove();  //全部删除
    button.detach();
    $('.btn').remove('.list');
    button[0].click();
</script>
</body>
</html>

jQuery中的节点操作。