jquery下插入标签以及clone的应用

//内部插入  插入一个儿子
        //var $ele = $("<h1></h1>")//创建h1标签
       // $ele.html('hello')
       // $ele.css('color','red')
        //$('.c1').append($ele)  //内部插入到后面
        //$ele.appendTo('.c1')
       // $('.c1').prepend($ele)//插入到前面
       // $ele.prependTo('.c1')

 //外部查ru  插入一个兄弟
       /* $('.c1').after($ele)
        $('.c1').before($ele)
        $ele.insertAfter('.c1')
        $ele.insertBefore('.c1')*/

  //替换
       // $('p').replaceWith($ele)

        //清空
       // $('.c1').empty()//清空内部内容
       // $('.c1').remove()//把自己也清空

clone的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery文档处理</title>
</head>
<body>
<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>
<script src="/static/jquery.min.js"></script>
<script>
    function add(self) {
        var $clone_obj = $(self).parent().clone(true)//加上true之后,绑定的事件就不绑定了
        $clone_obj.children('button').text('-').attr('onclick', 'remove_obj(this)')

        $('.outer').append($clone_obj)
    }
    function remove_obj(self) {
        $(self).parent().remove()
    }
</script>

</body>
</html>

posted on 2018-06-15 09:51 wy0925 阅读(141) 评论(0) 编辑收藏举报