16-jquery 节点操作

创建节点：

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点：

1、append()和appendTo():在现存元素的内部，从后面插入元素

var $span = $('<span>this is a span</span>');
$('#div1').append($span);
...
<div id="div1"></div>

2、prepend()和prependTo():在现存元素的内部，从前面插入元素

3、after()和insertAfter():在现存元素的外部，从后面插入元素

4、before()和insertBefore():在现存元素的外部，从前面插入元素

 

删除节点：

$('#div1').remove();

 

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            //这种通过html()的字符串方式添加节点性能最高
            //但是如果原标签中要有内容，会重写里面的内容
            // $("#div1").html('')

            //新建一个带有属性的a元素，赋值给$a
            $a = $('<a href="#">link</a>')
            $('.div1').append($a)

            // 新建一个空的a元素
            $a2 = $('<a>')
            $('.div1').append($a2)

            //$a.append(b) == b.appendTo($a)
            //$a.after($b) == $b.insertAfter($a)
            //$a.before($b) == $b.insertBefore($a)

        })
        
    </script>
</head>
<body>
    <div class="div1">
        <h1>this is a h1</h1>
    </div>
</body>
</html>

操作已存在到节点：

对于新建到元素插入到节点中，就是直接插入

对于操作已存在的节点，那么就是将已存在的节点剪切

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
          
        /*操作已有元素，让p标签移动到h1前面
        下面两句实现同样的功能

        $('#p1').insertBefore($("#title01"))
        $('#title01').before($('#p1'))

          
        $a.before($b) == $b.insertBefore($a)
          
        */

          //将span标签放到p中
          // $('#p1').append($('#span01'))
          $('#span01').appendTo($('#p1'))

          //将a标签放到p前面
          // $('#p1').prepend($('#link01'))
          $('#link01').prependTo($('#p1'))

        })
        
    </script>
</head>
<body>
    <h1 id="title01">this is a h1</h1>
    <p id="p1">this is p</p>

    <span id="span01">this is a span</span>
    <a href="#" id="link01">link</a>    
</body>
</html>

 

posted @ 2019-03-31 18:37  greenfan  阅读(152)  评论(0)    收藏  举报