jQuery操作DOM节点的相关方法

最新推荐文章于 2024-05-11 00:24:25 发布
最新推荐文章于 2024-05-11 00:24:25 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： jQuery 文章标签： jquery web开发 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/owen_william/article/details/51339909
版权

1.在指定节点内插入新节点

   以下的内容都用于在打指定节点内添加新内容

1)        append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容。

2)        append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点，在每个节点的尾部依次插入function(index,html)函数的返回值。

3)        appendTo(selector):将当前jQuery对象包含的DOM元素添加到selecctor匹配的所有DOM的内部的尾部。

4)        prepend(content):在jQuery对象包含的所有DOM节点内的顶部插入content所代表的内容，其中content既可以是HTML字符串，也可以是DOM元素，还可以是jQuery对象。

5)        prepend(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点，在每个节点的顶部依次插入function(index,html)函数的返回值。

6)        prependTo(selector):将当前jQuery对象包含DOM元素添加到selector匹配的所的DOM有内部的顶端。

 下面是程序示范了这些方法的功能。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="OwenWilliam" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 添加HTML节点 </title>
</head>
<body>
<div id="test1"></div>
<div id="test2" style="border:1px solid black;">id为test2的元素</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
	// 直接将一段HTML字符串添加到id为test1的元素的内部的尾端
	$("#test
最低0.47元/天 解锁文章
Owen William
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery DOM节点操作
weixin_44540247的博客
04-30 487
DOM节点的操作对于原生Js来说就是通过document.createElement()来创建元素，然后通过setAttribute()创建元素的属性和设置属性值。如果要添加一下内容则通过innerHTML()方法给元素添加内容。最后通过appendChild()将该元素添加到body里面或者添加到某个元素里面。 而jQuery对节点操作就不用这么客观、繁琐。jQuery可以直接通过一个appe...
jquery的DOM节点操作(创建和插入元素节点)
qq_45308912的博客
11-24 1847
1.创建元素节点 2.插入节点 动态创建新元素节点后，需要执行插入或追加操作，否则不会在页面显示出来。 按照元素的层次关系来分，可以分为内部和外部两种方法 元素内部插入子节点 元素内部插入子节点有两种方式，推荐使用红框框的方式 元素外部插入子节点 元素内部插入子节点也有两种方式，推荐使用红框框的方式 ...
用js操作dom节点的一些方法
最新发布
我的博客
05-11 602
在已有的子节点前插入一个新的子节点，也可以利用已知的子节点获取其父节点：existNode.parentNode.insertBefore(newNode,existNode);复制节点domNode。neborNode.previousElementSibling ：返回某个节点的上一个兄弟元素节点（不包括文本节点、注释节点）neborNode.previousSibling：返回某个节点的上一个兄弟节点（包括文本节点、注释节点）将某个子节点替换为另一个新节点，新节点可以是已存在的，也可以是新创建的。
Dom节点操作
weixin_44809439的博客
08-10 227
父子兄层级关系 父 node.parentNode parentNode 属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回 null 。 子 parentNode.childNodes（标准） parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。 注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes parentNode
jQuery中 DOM节点操作方法大全
11-28
append(content | fn)：向每个匹配的元素内部追加内容。参考：http://jquery.cuishifeng.cn/append.html 例如：向所有段落中追加一些HTML标记。 <p>I would like to say: </p> $("p").append("<b>Hello</b>"); [ <p>I would like to say: <b>Hello</b></p> ] appendTo()：这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中 例如：把所有段落追加到ID值为foo的元素中。 <p>I wou
jQuery操作DOM节点
brid_fly的博客
06-12 2650
|-----html(); text();val();获取值 html():文本和标签都可以解析出来 text():只能获取文本 val():获取input:text中的值！|----- html(content); text(content); val(content);设置 html：设置节点 text：只能设置文本 val:纯value值|-----创建节点：用工厂函数...
JQuery创建DOM节点的方法
01-19
本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下： 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM...
JQuery查找DOM节点的方法
12-29
本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下： DOM操作是JQuery最常见的用法，下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作，首先...
JQuery插入DOM节点的方法
10-24
主要介绍了JQuery插入DOM节点的方法,实例分析了jQuery实现DOM结点插入所涉及的常见函数使用技巧,需要的朋友可以参考下
有关jquery与DOM节点操作方法和属性记录
11-26
总结一下，jQuery与DOM节点操作相关的知识主要包括：如何使用jQuery的方法进行元素的添加、插入、删除和替换，以及DOM API中的基本节点操作方法如`appendChild()`, `insertBefore()`, `replaceChild()`和`...
js和jquery对dom节点的操作(创建/追加)
10-27
本文详细介绍下js和jquery对dom节点的操作包括创建、追加等等，感兴趣的朋友可以参考下哈，希望对你有所帮助
jQueryDOM节点操作
weixin_47216582的博客
09-28 186
1.创建节点 -在jQuery中创建一个节点是非常迅速的，所创建出来的节点是一个jQuery对象 使用（“”）工厂方法,如创建一个div节点：（“”）工厂方法,如创建一个div节点：（“”）工厂方法,如创建一个div节点：(‘’)或$(’’),记得标签要闭合 2.插入节点 在创建好的节点插入有多种方式： append() 在节点末尾添加元素 如：append(content|fn):向每个匹配的元素内部追加内容 $(A).append(B),将B添加到A中 appendTo() 与append作用相同
JQuery中DOM节点的操作
theVicTory的博客
01-27 498
Jquery中DOM节点的操作 已有对象.append(要添加的对象) 作为最后一个子元素添加 要添加的对象.appendTo(已有对象) prepend（）/prependTo() 作为第一个子元素添加 已有元素.before(要添加的元素)/after() 在...
jQuery - 删除元素
cms专家
02-22 604
删除元素/内容 如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素）empty() - 从被选元素中删除子元素     jQuery remove() 方法 jQuery empty() 方法 jQuery empty() 方法删除被选元素的子元素。 实例 $("#div1").empty(); jQ
jQuery节点操作方法
独茧
03-06 1932
在元素内部插入节点 方法 说明 示例 append(content) 为所有匹配的元素的内部追加内容 $(‘#B’).append(‘< p >A< /p >’); //向id为B的元素中追加一个段落 appendTo(content) 将所有匹配元素添加到另一个元素的元素集合中 $(‘#B’).appendTo(‘#A’);//将id为B的元素追加到id为A的元素
jQuery 之 DOM 操作（每天记录一点点）
叱咤少帅的博客
10-19 170
（1）获取HTML元素信息 三个简单实用的用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#b
使用jQuery操作DOM
易始的博客
07-04 269
DOM操作分类 DOM操作分为三类： *DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() *HTML-DOM：用于处理HTML文档，如document.forms *CSS-DOM：用于操作CSS，如element.style.color="green" 提示：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持 jQuery中的DOM操作 *jQuery对JavaScript中的DOM操作进行了封装 *
js试题及答案(四)
热门推荐
陈乾的博客
08-19 1万+
一、单选题（共30题，每题2分） 1.闭包的好处说法不对的 A 缓存变量 B 防止命名冲突 C 可能造成内存泄露 D 减少内存使用率 解析: 无 2.不能进行强制类型转化的为 A parseInt B parseFloat C Number D Math.floor 正确答案: D 3.alert(username);var username=“leson”;结果为 A undefined B leson C null D 报错 正确答案: A 解析: 变量提升，预解析 4.不属于常
jQuery中的节点操作
秦哥的博客
12-30 398
目录 0.码仙励志 1.创建节点 2.添加节点---append appendTo prepend prependTo after before 3.清空内容---empty 4.删除节点---remove 5.克隆节点---clone 0.码仙励志 没有人可以回到过去重新开始，但谁都可以从今日开始，书写一个全然不同的结局。 1.创建节点 &lt;head&gt; &...
遍历同辈节点的方法_JQuery遍历DOM节点的方法
05-26
在 jQuery 中，可以使用以下方法来遍历同辈节点： 1. `next()`：返回当前元素的下一个同辈元素。 2. `prev()`：返回当前元素的上一个同辈元素。 3. `nextAll()`：返回当前元素之后所有的同辈元素。 4. `prevAll()`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值