jquery 学习(四) - 标签 添加/删除/修改

HTML代码

<div class="a1">
    <div>
        <span id="a2">aaa</span>
        <button onclick="a3(this)">+</button>
    </div>
</div>

事件代码

 $(\':button\').click(function () {

        //定义一个新的标签 $s1
        var $s1 = $("<p>");
        $s1.html("hello OK!");
        $s1.css({\'color\': \'red\'});

        //下面的代码都写入这里

    }

 

内部插入标签

        //内部 插入标签
            //添加到父类的子类之后
            //(父类+子类)
            $(\'.a1\').append($s1);
            //(子类+父类)
            $s1.appendTo(".a1");

            //添加到父类,子类之前
           //(父类+子类)
            $(".a1").prepend($s1);
            //(子类+父类)
            $s1.appendTo(".a1");

外部插入标签

    //外部插入标签
        //添加此标签 前一个兄弟标签
        $(\'.a1\').after($s1);
        //添加此标签 后一个兄弟标签
        $(\'.a1\').before($s1);

        //新创建标签 添加到.a1前一个兄弟标签
        $s1.insertAfter(\'.a1\');
        //新创建标签 添加到.a1后一个兄弟标签
        $s1.insertBefore(\'.a1\');

替换

        //替换
        $(\'span\').replaceWith($s1)    

 

删除/清除

    //删除/清除

        //移除当前标签
         $(\'.a1\').remove();

        //清除标签下的标签
        $(\'.a1\').empty();

 

复制操作 实例

  //clone(复制)
    // clone()
    function a3(self) {

        //复制当前标签的父标签
        var $xx_obj = $(self).parent().clone();
        //将此标签的子标签 html值修改为\'-\',并修改属性绑定新函数a4(this)
        $xx_obj.children(\'button\').html(\'-\').attr(\'onclick\',\'a4(this)\');
        //.a1 标签下 加入新标签
        $(\'.a1\').append($xx_obj);
    }
    //删除当前标签
    function a4(self) {
        $(self).parent().remove()
    }

效果:

图一:

图二:

图三: