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

时间：2024-06-27 10:35:50
//内部插入  插入一个儿子

        //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>

相关文章