Dom操作（标签--增、删、移动）

时间：2021-05-26 19:13:55

Dom操作

移动或者插入标签的方法

1、append()和appendTo()：在现存元素的内部，从后面放入元素； 先声明一个变量用来保存新标签 
var $span = $('这是一个span元素');

然后用append函数将新元素加入到模块中 $('#div1').append($span);

 

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

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

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

删除标签

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

实例代码

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{background:pink;}

    </style>

    <script type="text/javascript" src="jquery-1.12.4.min.js" ></script>

    <script type="text/javascript">

        $(function(){

            //$('div').html( $('div').html() + '<p>我是JS生成的标签</p>')

            //自定义标签生成成功。    名字：节点

            var $p = $('<p>我是JS生成的标签</p>');

            //在div的内部最后去追加一条数据

            //$('div').append($p);

            //在div的内部最前去追加一条数据

            //$('div').prepend($p);

            //在div的外部之前去追加一条数据

            //$('div').before($p)

            //在div的外部之后去追加一条数据

            $('div').after($p);

            //删除标签。斩草除根,标签都直接删除

            $('ul li').eq(1).remove();

        })

    </script>

</head>

<body>

    <div>

        <p>我是原有的p标签</p>

    </div>

    <ul>

        <li>1111</li>

        <li>2222</li>

        <li>333</li>

    </ul>

</body>

相关文章