jQuery--DOM的节点操作

目录

 

创建节点

添加节点

替换节点

删除节点

清空节点

包裹节点

 遍历节点

属性操作

文本操作

样式操作

---

创建节点

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象

返回值:该标记的jQuery对象

var $div=$("<div class="one">添加节点</div>");
//创建没有加入节点则还不能显示

添加节点

在元素内插入(插入子元素)

append()

向每个匹配的元素内追加内容

appendTo()

将所有匹配的元素追加到指定的元素中，该方法与append()使用颠倒

prepend()

向每个匹配的元素内部追加前置内容

prependTo()

将所有匹配的元素前置到指定的元素中。

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
</div>
<script>
    $(function(){
            //创建节点
        var $inner=$('<div class="inner">hello</div>');
        //将$inner节点插入到.outer后面
        $('.outer').append($inner);
        //和上面的等价
        $inner.appendTo($('.outer'));
            
           //将$inner节点插入到.outer元素内的最前面(作为第一个子元素)
        $inner.prependTo($('.outer'));
        //和上面的等价
        $('.outer').prepend($inner);
    });

</script>

插入兄弟元素

after()

向每个匹配的元素之后追加内容

insertAfter()

将所有匹配的元素追加到指定的元素后，该方法与append()使用颠倒

before()

向每个匹配的元素的最前面追加内容

insertBefore()

将所有匹配的元素插入到指定元素的最前面。

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
</div>
<script>
    $(function(){
            //创建节点
        var $inner=$('<div class="inner">hello</div>');
        //将$inner节点插入到.outer后面
        $('.outer').after($inner);
        //和上面的等价
        $inner.insertAfter($('.outer'));
            
           //将$inner节点插入到.outer的最前面(作为上个兄弟元素)
        $inner.before($('.outer'));
        //和上面