jQuery操作DOM节点

最新推荐文章于 2024-04-11 08:10:37 发布
原创 最新推荐文章于 2024-04-11 08:10:37 发布 · 398 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

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

创建节点

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="button" value="节点" id="btn">


</body>


</html>

append（）前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo（）前面是要插入的元素内容，而后面是被插入的对象

prepend() 与 prependTo()方法 ：

<!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.prependTo($(".uu"));
        $(".uu").prepend(node);
    })
})
</script>

<body>
<ul class="uu">
    <li>苹果</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 方法能够使用函数来插入内容。

after与insertAfter方法 ：

<!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.insertAfter($(".uu"));
        $(".uu").after(node);
    })
})
</script>

<body>
<ul class="uu">
    <li>苹果</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面

before()与insertBefore()方法 ：

<!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.insertBefore($(".uu"));
        $(".uu").before(node);
    })
})
</script>

<body>
<ul class="uu">
    <li>苹果</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面

删除节点

remove删除
empry清空

remove() ：

<!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.insertBefore($(".uu"));
        $(".uu li:eq(1)").remove()
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

empty() ：

<!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.insertBefore($(".uu"));
        $(".uu li:eq(1)").empty()
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

remove()与empty()方法的区别 ：
remove()方法删除会把标签也一起删除 而 empty()方法只会把标签里面的内容清空标签还在

替换节点

replaceWith用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
replaceAll用集合的匹配元素替换每个目标元素

replaceWith() ：

<!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;
}
    .one{
        color: red;
    }
</style>
<script>
$(function () {
    $("#btn").click(function () {
        // var node=$("<li>橙子</li>");
        // node.insertBefore($(".uu"));
        $(".uu li:eq(1)").replaceWith("<li class='one'>菠萝</li>")
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

replaceAll () ：

<!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;
}
    .one{
        color: red;
    }
</style>
<script>
$(function () {
    $("#btn").click(function () {
        // var node=$("<li>橙子</li>");
        // node.insertBefore($(".uu"));
        $("<li class='one'>菠萝</li>").replaceAll(".uu li:eq(1)")
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

replaceAll()和.replaceWith()功能类似，主要是目标与内容替换的位置区别

复制节点

clone(参数)克隆匹配的DOM元素并且选中克隆的副本

clone(参数) ：

<!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;
    cursor: pointer;
}
</style>
<script>
$(function () {
    $(".uu li").click(function () {
        $(this).clone(true).appendTo("ul")
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>



</body>


</html>

clone() 方法 是复制一个元素，不包含其所有事件
clone(true) 方法 是复制一个元素及其所有事件，

abcdhulei
关注
使用jQuery操作DOM节点
NsbiCs的博客
10-10 184
本文提供了一些常见的DOM节点操作示例，涵盖了选择节点、操作内容和属性、添加和移除类、插入和删除元素以及事件处理等。本文提供了一些常见的DOM节点操作示例，涵盖了选择节点、操作内容和属性、添加和移除类、插入和删除元素以及事件处理等。jQuery是一款广泛使用的JavaScript库，它提供了简化操作DOM节点的方法和功能。本文将详细介绍如何使用jQuery来进行DOM节点操作，并提供相应的源代码示例。jQuery是一款广泛使用的JavaScript库，它提供了简化操作DOM节点的方法和功能。
jQueryDOM节点操作
weixin_44569346的博客
05-05 300
开发工具与关键技术：Adobe Dreamweaver JavaScript 作者：陈石军 撰写时间：2020年5月3日 一．DOM节点的创建 jQuery节点的创建:()函数处理，()函数处理，()函数处理，(“html结构”)，jQuery创建的节点是一个jQuery对象。 JavaScript中创建DOM节点，第一创建元素document.createElement()，第二为节点添加一下属...
jQuery DOM节点
weixin_44543412的博客
04-30 338
jQuery DOM节点 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年4月30日 jQuery文档处理DOM节点包括：内部插入、外部插入、包裹、替换、删除、复制这几种。每部分都有对应的函数值。 通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程，DOM节点的创建流程：创建节点（元素、属性、文...
jQuery —— 操作DOM节点
Jxinyun1314的博客
11-03 206
html内容！ <body > <p>你最喜欢的名人是？</p> <ul> <li title="这是乔布斯"><font color="green">乔布斯</font></li> <li title="这是比尔盖茨" c...
jQuery DOM节点操作
weixin_44540247的博客
04-30 592
DOM节点的操作对于原生Js来说就是通过document.createElement()来创建元素，然后通过setAttribute()创建元素的属性和设置属性值。如果要添加一下内容则通过innerHTML()方法给元素添加内容。最后通过appendChild()将该元素添加到body里面或者添加到某个元素里面。 而jQuery对节点操作就不用这么客观、繁琐。jQuery可以直接通过一个appe...
jQuery关于DOM操作节点一些方法
weixin_46156304的博客
11-14 681
查找节点 jQuery 查找页面元素 - 并没有参考 DOM 中的 Node 对象，而是 Element 对象 text()方法 - 类似于 DOM 中的 textContent 属性 获取 - text() 设置 - text(textContent) textContent - 表示新的文本内容 attr()方法 获取 - attr(name) - 类似于 DOM 中的 getAttr(attrName) 设置 - attr(name,value) - 类似于 DOM 中的 setAttribu
jQuery-DOM节点的创建
ssisse的博客
05-08 403
本文转自 慕课网 创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。 试想下这样的情况：如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括
JQuery查找DOM节点的方法
12-29
本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下： DOM操作是JQuery最常见的用法，下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作，首先...
JQuery插入DOM节点的方法
10-24
JQuery作为一种广泛使用的JavaScript库，提供了大量用于DOM操作的工具函数，其中插入DOM节点的方法尤其重要，因为它让动态地向页面中添加内容变得更加简单和直观。在JQuery中，有多种方法可以实现DOM节点的插入，每...
JQuery创建DOM节点的方法
01-19
本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下： 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM...
jQuery中 DOM节点操作方法大全
11-28
append(content | fn)：向每个匹配的元素内部追加内容。...appendTo()：这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中 例如：把所有段落追加到ID值为foo的元素中。 <p>I wou
jQueryDOM操作节点
腻害
05-05 206
（作者： 邱锡纶 撰写时间 ： 2020年05月03日 星期天） jQueryDOM操作节点 jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？答案当然是操作对应的DOM节点啦！回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对...
jQuery操作DOM节点（一）
生面别开
11-04 967
浏览器中 什么是BOM？是什么DOM？ BOM：Browser Object Model 浏览器对象模型，提供一些对浏览器的操作的对象，比如：window对象,window.open,alert.... DOM: Document Object Model 文档对象模型，HTML页面看作一个文档，文档中的每个标签元素都看作一个对象（DOM节点），每个DOM节点有一定的关系（父子、兄弟）。 形
使用jQuery操作 DOM
shi15062772894的博客
12-31 604
DOM操作分类 DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" jQuery中的DOM操作： jQuery对JavaScript中的DOM操作进行了封装 jQuery中的DOM操作 样式操作 内容及Value值操作 节点操作 节点属性操作 节点遍历 CSS-DOM操
jQuery中的DOM操作
前端之行，任重道远！
02-22 425
一，查找节点 1.查找或操作属性节点：通过jQuery选择器完成 查找到所需要的元素后可以调用jQuery对象的attr()方法来获取它的各种属性值 注：若直接操作value属性值可以使用更便捷的val()方法 2.查找或操作文本节点：通过text()方法 二，创建节点 使用 $(“想要创建的节点”) 即可 $("<p>我爱你</p>") //就是直接创建了个<p>我爱你</p>节点 三，插入节点 $("div").append($("&l
JQuery操作DOM
m0_74270395的博客
04-11 898
prev() 和 .next() 方法：.prev() 方法用于获取匹配元素集合中每个元素的前一个同级元素，而 .next() 方法用于获取每个元素的后一个同级元素。.attr() 和 .removeAttr() 方法：.attr() 方法用于获取或设置元素的属性值，.removeAttr() 方法用于移除。.children() 方法：.children() 方法用于获取匹配元素集合中每个元素的子元素。.find() 方法：.find() 方法用于获取匹配元素集合中每个元素的后代元素。
在dom节点后面追加节点
最新发布
02-07
### 如何在指定的DOM节点后追加新节点 为了在特定的DOM节点后面添加一个新的子节点，可以采用`insertBefore`方法来实现这一需求。当希望将新创建的节点放置于某个具体节点之后时，可以通过定位该节点的父级，并利用其下一个兄弟节点作为参考点来进行插入操作[^2]。 下面给出具体的实例代码展示此过程： 假设有一个已存在的HTML结构如下所示： ```html <body> <div id="existingNode">这是已有节点</div> </body> ``` 现在要在ID为`existingNode`的这个元素之后加入一段新的文本内容，可按照以下方式编写JavaScript脚本完成任务： ```javascript // 创建一个新节点 var newNode = document.createElement('p'); newNode.textContent = "我是被添加的新段落"; // 获取目标节点及其父节点和后续的第一个兄弟节点 var targetElement = document.getElementById('existingNode'); var parentElement = targetElement.parentNode; var nextSibling = targetElement.nextSibling; // 如果存在直接相邻的弟弟妹妹，则在其之前插入；否则就简单地append到父亲之下即可。 if (nextSibling){ parentElement.insertBefore(newNode, nextSibling); } else { parentElement.appendChild(newNode); } ``` 通过上述逻辑判断是否存在紧随其后的同辈节点，以此决定采取何种方式进行安全可靠的插入动作。如果没有找到任何后面的兄弟姐妹，默认会把新成员放到最后面的位置上去[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值