jQuery操作DOM节点

最新推荐文章于 2022-10-03 13:26:02 发布

abcdhulei

最新推荐文章于 2022-10-03 13:26:02 发布

阅读量343

点赞数 2

本文链接：https://blog.csdn.net/abcdhulei/article/details/93524292

版权

这篇博客详细介绍了jQuery操作DOM节点的各种方法，包括如何创建、追加、删除、替换和复制节点。讲解了append、prepend、after、before、remove、empty、replaceWith、replaceAll以及clone等函数的使用，帮助理解jQuery对DOM的操作技巧。

摘要由CSDN通过智能技术生成

创建节点

dom 节点创建的过程（创建节点<元素、属性、文本等>、添加节点的属性、加入到文档中）

jQuery创建节点的方法：

创建元素节点:

$("<div></div>")；

创建文本节点：

$("<div>直接将文本的内容添加进去</div>")；

创建节点并给节点添加属性：

var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

节点创建完成。需要将节点添加到文档中，添加新内容的时候需要用到接下来的：

追加节点


append	向每个匹配的元素（内部）的后面追加内容
appendTo	把所有匹配的元素追加到另一个，指定的元素后面中
prepend	在被选元素的开头（在内部）插入指定内容
prependTo	把所有匹配的元素前置到另一个指定的元素集合中
after	在被选元素的后面（在外部）插入指定的内容
insertAfter	在目标元素前面插入集合中每个匹配的元素
before	在被选元素的前面（在内部）插入指定内容
insertBefore	在目标元素后面插入集合中每个匹配的元素

append()与appendTo()：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
</style>
<script>
$(function () {
    $("#btn").click(function () {
        var node=$("<li>橙子</li>");
        // node.appendTo($(".uu"));
        $(".uu").append(node);
    })
})
</script>

<body>
<ul class="uu">
    <li>苹果</li>
</ul>
<input type&

最低0.47元/天解锁文章

abcdhulei

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作DOM节点

创建节点dom 节点创建的过程（创建节点<元素、属性、文本等>、添加节点的属性、加入到文档中）jQuery创建节点的方法：创建元素节点:$("<div></div>")；创建文本节点：$("<div>直接将文本的内容添加进去</div>")；创建节点并给节点添加属性：var div = $("<div class...
复制链接

扫一扫