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()
    }

效果:

图一:

图二:

图三: