用jQuery获取与改变html的内容

获取html的内容:

一、$("选择器").html(); //表示获取选择器所对应html元素的所有内容(包含内嵌的子元素)。
二、$("选择器").text(); //表示获取选择器所对应的html元素的文本内容。

实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<!-- 先引入jquery库 -->
<script src="js/3.2.1jquery.min.js"></script>
</head>

<body>
		
	<div id="div1">
		<p>
			射人先射马,
		</p>
	</div>
	
	<div id="div2">
		<p>
			擒贼先擒王。
		</p>
	</div>
	
	<script>
		var div1=$("#div1").html();
		alert("html的内容:"+div1);//弹出的结果包含文本与内嵌的p元素
		
		var div2=$("#div2").text();
		alert("text的内容:"+div2);//弹出的结果只有文本
	</script>

</body>
</html>

改变html的内容:

一、$("选择器").html("x"); //此“x”表示选择器所对应html元素改变后的内容(能正常解析显示内嵌子元素)。
二、$("选择器").text("x"); 此“x”表示选择器所对应html元素改变后的文本内容(内嵌子元素不能解析,只当普通文本处理显示)。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<!-- 先引入jquery库 -->
<script src="js/3.2.1jquery.min.js"></script>
</head>

<body>
		
	<div id="div1">
		<p>
			射人先射马,
		</p>
	</div>
	
	<div id="div2">
		<p>
			擒贼先擒王。
		</p>
	</div>
	
	<script>
		var div1=$("#div1").html("<h1>我是标题<h1>");//能正常解析显示内嵌h1元素
		
		var div2=$("#div2").text("<h1>我是标题<h1>");//内嵌的h1元素不能解析,只当普通文本处理显示
	</script>

</body>
</html>

改变html内容后的效果:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:
顶部