Jquery中的DOM操作 (二.插入节点)

最新推荐文章于 2021-11-24 23:20:09 发布

张大仙是个妖怪

最新推荐文章于 2021-11-24 23:20:09 发布

阅读量371

点赞数

CC 4.0 BY-SA版权

分类专栏： # jQuery选择器和DOM操作文章标签： jQuery DOM对象

本文链接：https://blog.youkuaiyun.com/NDKHBWH/article/details/59523993

jQuery选择器和DOM操作专栏收录该内容

26 篇文章

订阅专栏

本文通过一个简单的示例展示了如何使用jQuery进行节点操作，包括插入、追加、前置及前后插入等基本方法，帮助读者快速掌握jQuery中DOM操作的基础用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  $(function(){
        //3.插入节点
                //(1).向每个匹配的元素内部追加内容 append()
                        $("ul").append($("<li>草莓</li>"));
                //(2).上面相反的不是将b追加到a,而是将a追加到b
                        $("<li>西瓜</li>").appendTo( $("ul"));
                //(3).向每个匹配的元素内部前置内容
                        $("ul").prepend($("<li>苹果</li>"));
                //(4).上面相反
                        $("<li>香蕉</li>").prependTo( $("ul"));
                //(5).在每个匹配元素之后添加内容
                        $("ul:first").after($("<ul><li>橙子</li></ul>"))
                //(6).上面相反
                        $("<ul><li>牛油果</li></ul>").insertAfter($("ul:first"));
                //(7).在每个匹配元素之前添加内容
                    $("ul:first").before($("<ul><li>香瓜</li></ul>"))
                //(8).上面相反
                   $("<ul><li>葡萄</li></ul>").insertBefore($("ul:first"));
        });

<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
</ul>
<ul>
</ul>
</body>