JQueryDOM之修改节点

最新推荐文章于 2022-07-12 21:07:45 发布

雷蒙96

最新推荐文章于 2022-07-12 21:07:45 发布

阅读量1.5k

点赞数

分类专栏： jQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/weixin_41298721/article/details/87894920

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

修改节点

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

复制节点：

$(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>

雷蒙96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQueryDOM之修改节点

修改节点修改文档中的元素节点可以使用多种方法:复制节点、替换节点、包裹节点复制节点：$(element).clone() 复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。例:$("ul li:eq(0)").clone(true);替换节点：$(被替换的元素).repalcewith(创建的节点) replaceWith()方法的作用是将所有匹配...
复制链接

扫一扫