对DOM节点进行操作--插入/添加节点

最新推荐文章于 2023-07-17 09:31:19 发布

极客研究者

最新推荐文章于 2023-07-17 09:31:19 发布

阅读量2.6k

点赞数

分类专栏： JQuery 文章标签： jquery css

本文链接：https://blog.csdn.net/qq_34550459/article/details/106117304

版权

JQuery 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

插入节点(添加节点):
在元素内部插入:

创建节点:
使用工厂函数:$(html) -->包装成jquery对象
1.向元素内部插入节点:就是向一个元素中添加子元素和内容
append(content):为所有匹配的元素的内部添加内容,追加到该元素的后面

appendTo(content)；将指定的元素移动到另一元素内
如:A.appendTo(B) -->将A元素移动到B元素内部的最后面(移动到最后面)

prepend(content):为所有匹配的元素的内部前置内容(将新元素添加到最前面)
prependTo(content):为所有匹配元素前置到另一个元素的元素集合
将指定的元素移动到另一个元素内部的最前面

如:A.prependTo(B) -->将A元素移动到B元素内部的最前面

在元素外部插入:

after(content):在每个匹配元素之后插入内容
A.after(B):在A元素的后面添加B元素

insertAfter(content):将所有匹配的元素插入到另一个指定元素的前面

A.insertAfter(B):在B元素后面添加A元素:
如果A元素在页面上已存在,则移动元素至B元素后面

before(content):在每个匹配元素之前插入插入内容
A.before(B):在A元素的前面添加B元素

insertBefore(content):将所有匹配的元素插入到另一个指定元素的前面
A.insertBefore(B):将A元素移动到B元素的前面

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery之对DOM节点进行操作</title>
    <style>

    ul{
        list-style:none;
    }

    .content,.box5{
        margin: 10px 0;
    }
    </style>
    <script src="../../../js/jquery.min.js"></script>
    <script>
        $(function(){
         var ulElement=$('.box>ul');
         //添加元素
         var newEle=$('<li>新的li元素1</li>');
         ulElement.append(newEle);
         ulElement.append('<li>新的li元素2</li>');
        
         //将p元素移动到ul下的第2个li元素中
         $('p').appendTo(ulElement.children().eq(1));
        
         //将li3元素添加到ul最前面
        ulElement.prepend('<li>新的li元素3</li>');
        
        //将p移动到ulElement元素的最前面
        $('#p').prependTo(ulElement);

        //在box元素之后插入元素
        $('.box').after("<div class='box2'>新添加的div元素1</div>");
        //在box元素之前插入元素
        $('.box').before("<div class='box3'>新添加的div元素2</div>");

        
        //将box4移动到content元素后面
        $(".box4").insertAfter($('.content'));
        //将box4移动到content元素前面
        $(".box5").insertBefore($('.content'));


        });
    </script>
</head>
<body>
        <div class='box4'>新添加的div元素4</div>
        <div class='box5'>新添加的div元素5</div>
    <div class="box">
        <ul>
            <li>原来的li元素</li>
        </ul>

        <p>这个世界会好吗?</p>
        <p id="p">我们要相信,这个世界会好的,</p>
    </div>

    <div class="content">
        content div
    </div>
</body>
</html>

极客研究者

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
对DOM节点进行操作--插入/添加节点

插入节点(添加节点):在元素内部插入:创建节点:使用工厂函数:::(html) -->包装成jquery对象1.向元素内部插入节点:就是向一个元素中添加子元素和内容append(content):为所有匹配的元素的内部添加内容,追加到该元素的后面appendTo(content)；将指定的元素移动到另一元素内如:A.appendTo(B) -->将A元素移动到B元素内部的最后面(移动到最后面)prepend(content):为所有匹配的元素的内部前置内容(将新元素添加到最前面
复制链接

扫一扫

专栏目录