2019年-08月-08日
0
用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内容后的效果:
