修改节点

修改文档中的元素节点可以使用多种方法:复制节点、替换节点、包裹节点

复制节点：

$(element).clone()
复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。
例:$("ul li:eq(0)").clone(true);

替换节点：

$(被替换的元素).repalcewith(创建的节点)
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM 元素。
$(创建的节点).repalceAll(被替换的元素)
replaceAll()方法与replaceWith（）方法的作用相同，只是颠倒了replaceWith（）操作

包裹节点：

$(element).wrap()
$(element).wrapAll()
$(element).wrapInner()
包裹节点方法使用其他标记包裹目标元素从而改变元素的显示形式等，并且该操作不会破坏原始文档的词义。

包裹节点有三种实现形式：wrap() wrapAll() wrapInner()
(1)wrap()方法如下：$(dstelement).wrap(tag);

例：
$("p").wrap("");该示例方法使用b标签包裹所有的p元素每个元素都使用b标签包裹。
(2)wrapAll()方法如下：$(dstelement).wrapAll(tag);

例：
$("p").wrapAll("");访示例方法使用b标签包裹所有的p元素，所有的p元素标签用一个b标签包裹。
(3)wrapInner()方法如下：$(dstelement).wrapInner(tag);

例：
$("strong").wrapInner("");该示例使用b标签包裹每个一strong元素的子元素。

案例源码：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM修改节点</title><script src="../js/jquery-3.1.1.js"></script><script>$(function(){//给所有的li添加点击事件$("li").click(function(){alert($(this).text());})$("#btn1").click(function(){//复制id为fruit的元素中的第一个li,并且追加到id为color的ul中//clone()：如果要复制的节点有id属性，则克隆后，会在一个页面中有id属性值相同的清况//可以通过attr（）方法修改id属性的值//clone(true)：在克隆节点的同时会克隆节点的行为var $li=$("#fruit li:first").clone(true);$("#color").append($li);//修改id属性的值$li.attr("id","li2");});//替换节点$("#btn2").click(function(){//创建一个li元素节点替换id为color的元素的最后一个li节点$("<li>黄色</li>").replaceAll("#color li:last");//把id为color第二个li节点替换成一个新的li节点$("#color li:eq(1)").replaceWith("<li>黑色</li>");});//包裹节点$("#btn3").click(function(){//给id为fruit 的li元素包裹一个font节点//wrap():给每一个li标签都加上了包裹标签$("#fruit li").wrap("<font color='red'></font>");//wrapAll（）：包裹的是所有的li标签$("#color li").wrapAll("<font color='red'></font>");//wrapInner():包裹的是元素节点的内容$("#game li").wrapInner("<font color='red'></font>");})})</script>
</head>
<body><h3>DOM树</h3><p title="水果">你喜欢的水果是？<span>fruit</span></p><ul id="fruit"><li title="苹果" id="li1">苹果</li><li title="桔子">桔子</li><li title="香蕉">香蕉</li></ul><p title="颜色">你最喜欢的颜色</p><ul id="color"><li>红色</li><li>绿色</li><li>蓝色</li></ul><p title="游戏">你最喜欢的游戏</p><ul id="game"><li>刺激战场</li><li>王者荣耀</li><li>qq斗地主</li></ul><button id="btn1">复制节点</button><button id="btn2">替换节点</button><button id="btn3">包裹节点</button>
</body>
</html>

JQueryDOM之修改节点相关推荐

java操作xml文件--修改节点
上一篇文章我介绍了SAX方法解析XML文件的过程,这篇文章讲解的内容是利用DOM方法修改XML文件的节点内容. 下面依然是首先贴出XML文件: <?xml version ...
rapidxml修改节点的值
1.rapidxml修改节点的value,修改之后,序列化还是原来的值,具体原因是什么,要看rapidxml是怎么实现的.如下: void TestRapidXml() {char* xmlConte ...
WinForm------TreeList修改节点图标和按钮样式
转载: https://documentation.devexpress.com/#WindowsForms/DevExpressXtraTreeListTreeList_CustomDrawNode ...
B-spline Curves 学习之B样条曲线的移动控制点、修改节点分析（7）
B-spline Curves: Moving Control Points B-样条曲线:移动控制点移动控制点是改变B-样条曲线形状的最明显的方法.在前面页讨论的局部修改方案说明了修改控制点 Pi ...
AntV G6修改节点label样式
代码布局如下: 主要代码: defaultNode: { // 节点样式修改type: 'image', // 设置节点为图片size: [40, 40], // 节点大小labelCfg: { // ...
ext tree相关知识动态修改节点小图标
ext tree相关知识 Java代码 ext tree 动态修改各个节点名称icon小图标 [java] view plaincopy ext tree 动态修改各个节点名称icon小图标 Jav ...
Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
数据结构，单链表讲解，并使用Java代码实现单链表增删改查【尾部添加，中间插入、修改节点、删除节点、展示链表】
文章目录单链表什么是单链表,链式存储结构详解链表的节点头节点,头指针和首元节点单链表的实现 1.尾部添加新节点思路分析代码实现注意事项 2.按照编号插入新节点思路分析代码实现注意 ...
vue修改节点class_Vue2.0 源码解读系列来自 Vue 的神秘礼盒
鄢栋,微医云服务团队前端工程师.有志成为一名全栈开发工程师甚至架构师,路漫漫,吾求索.生活中通过健身释放压力,思考问题. 目前 Vue3.0 打的很火热,都已经出了很多 Vue3.0 源码解析系列的博 ...

JQueryDOM之修改节点

修改节点

复制节点：

替换节点：

包裹节点：

案例源码：

JQueryDOM之修改节点相关推荐

最新文章

热门文章