jquery的节点操作html text append

时间：2022-11-22 19:56:28
1.jquery的html和text 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<style type="text/css">
		.addBg {
			background:#f00;
			color:#fff;
		}
		.bigger {
			font-size:20px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//把d2中的html替换d1中
			$("#d1").html($("#d2").html());	
			//text方法仅仅只是获取文本，而不会获取标签信息
			$("#d1").html($("#d2").text());
		});
		
	</script>
</head>
<body>
	<div id="d1">
		第一个div
	</div>
	<div id="d2">
		<ul>
			<li>八戒</li>
			<li>悟空</li>
			<li>无忌</li>
		</ul>
	</div>
</body>
</html>

2.节点操作的一些方法 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<style type="text/css">
		.addBg {
			background:#f00;
			color:#fff;
		}
		.bigger {
			font-size:20px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//在d1这个元素中插入d3这个元素(在d1节点的最后插入)，插入之后，d3就消失
			//$("#d1").append($("#d3"));
			//如果原始节点是数组，会在多个节点中插入
			// $(".ddd").append($("#d3"));
			
			//把d1插入到d3中,注意append和appendTo的区别
			//$("#d1").appendTo($("#d3"));
			
			//包装集为.ddd
			//$(".ddd").appendTo($("#d3")).css("color","#f00");
			//包装集为d3
			//$("#d3").append($(".ddd")).css("color","#f00");
			
			//在节点前面插入
			//$("#d1").prepend($("#d3"));
			
			//在d1后面插入d3,insertAfter和appendTo
			//$("#d1").after($("#d3"));
			
			//在d1的前面插入d3,insertBefore和insertAfter类似
			//$("#d1").before($("#d3"));
			
			//移除元素
			//$("#d2").remove();
			//清空了d3中的所有元素
			//$("#d3").empty();
			
			//从包装集中删除满足条件的元素
			//$("#d3 li").detach("li:contains('悟空')").css("color","#f00");
			
			
			//此时返回的包装集是d1,remove的时候就是remove了d1，还剩下hello,
			//变相完成了节点的替换
			//$("#d1").before("<div>hello</div>").remove().css("color","#f00");
			
			//replaceWith方法就是基于以上原理实现的，此时包装集没有任何意义，指向了被移除的元素
			// $("#d1").replaceWith("<div>ok</div>").css("color","#f00");
			
			//在d1的位置用d3来包裹之后，替换d1
			// $("#d1").wrap($("#d3"));
			
			//两个元素都会被包裹
			//$(".ddd").wrap($("#d3"));
			
			//取消包裹
			//$("ul").unwrap();
			
			//把一组元素包裹进去
			//$(".ddd").wrapAll($("#d3"));
			
			//用d3包裹了d1中的值之后，才插入到d1中
			$("#d1").wrapInner($("#d3"));
		});
		
	</script>
</head>
<body>
	<div id="d1" class="ddd">
		第一个div
	</div>
	<div id="d2" class="ddd">第2个div</div>
	<div id="d3">
		<ul>
			<li>八戒</li>
			<li>悟空</li>
			<li>无忌</li>
		</ul>
	</div>
</body>
</html>

方法  描述  示例
 append()  向每个匹配元素内部追回内容

 html代码：<p>我想说：</p>

 JQ代码：$("p").append("<b>你好</b>");

结果：

<p>我想说：<b>你好</b></p>
 appendTo()

 将所有匹配元素追加到指定的元素中

 颠倒append()做法

  html代码：<p>我想说：</p>

 JQ代码：$("<b>你好</b>").appendTo("p");

结果：

<p>我想说：<b>你好</b></p>
 prepend()

 向每个匹配元素内部前置内容

  html代码：<p>我想说：</p>

 JQ代码：$("p").prepend("<b>你好</b>");

结果：

<p><b>你好</b>我想说：</p>
 prependTo()

 将所有匹配元素追加到指定的元素中

 颠倒prepend()方法

  html代码：<p>我想说：</p>

 JQ代码：$("<b>你好</b>").prependTo("p");

结果：

<p><b>你好</b>我想说：</p>
 after()  在每个匹配元素之后插入内容  html代码：<p>我想说：</p>

 JQ代码：$("p").after("<b>你好</b>");

结果：

<p>我想说：</p><b>你好</b>
 insertAfter()

 将所有匹配元素追加到指定的元素的后面

 颠倒after()方法

  html代码：<p>我想说：</p>

 JQ代码：$("<b>你好</b>").insertAfter("p");

结果：

<p>我想说：</p><b>你好</b>
 before()  在每个匹配元素之前插入内容  html代码：<p>我想说：</p>

 JQ代码：$("p").before("<b>你好</b>");

结果：

<b>你好</b><p>我想说：</p>
 insertBefore()  将所有匹配元素追加到指定的元素的前面   html代码：<p>我想说：</p>

 JQ代码：$("<b>你好</b>").insertBefore("p");

结果：

<b>你好</b><p>我想说：</p>

标签：

相关文章