JQuery 节点操作 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            var $h1 = '<h1>这是一个h1标签</h1>';

            var $em = '<em>em标签</em>';

            var $i = '<i>i标签</i>';

            var $strong = '<strong>strong标签</strong>';


            //使用原生写法.(在内部添加新元素)
            // $('.div01').html( $('.div01').html() + $h1)

            // 使用jquery写法.在内部添加新元素; ( 内部-最后 )
            // $('.div01').append($h1);
            //把新元素添加到已有元素内部最后(更换顺序,调整主宾)
            $($h1).appendTo('.div01');

            // 把新元素添加到已有元素的( 内部-最前 ).
            // $('.div01').prepend($em);
            // $($em).prependTo('.div01')

            // 把新元素添加到已有元素的( 外部-后面 ).
            // $('.div01').after($i);
            // $($i).insertAfter('.div01')

            // 把新元素添加到已有元素的( 外部-前面 ).
            // $('.div01').before($strong);
            // $($strong).insertBefore('.div01');

            //删除已有标签remove
            $('.div01').remove()
            // 删除已有标签的时候, 其他依托于此标签添加的标签也会被删除!!!!


        })    

    </script>
</head>
<body>
    <div class="div01">我是一个div元素</div>
    <div class="div02">我是一个div元素</div>
</body>
</html>

 

posted @ 2019-08-13 20:33  Jrri  阅读(445)  评论(0)    收藏  举报