<html>
<head>
<title>js操作元素内容学习</title>
<meta charset="UTF-8"/>
<!--声明css-->
<style type="text/css">
#div01{
width: 200px;
height: 200px;
border: solid 1px orange;
}
</style>
<!--
操作元素内容学习:
获取元素对象
获取
元素对象名.innerHTML//返回当前元素对象的所有内容,包括HTML标签
元素对象名.innerHTML//返回当前元素对象的文本内容,不包括HTML标签
修改
元素对象名.innerHTML="新的值"//会将原有内容覆盖,并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
元素对象名.innerText="新的值"//会将原有内容覆盖,但HTML标签不会被解析,会作为普通文本显示。
-->
<!--声明js代码域-->
<script type="text/javascript">
//获取元素内容
function getContext(){
//获取元素对象
var div=document.getElementById("div01");
//获取元素内容
alert(div.innerHTML);
alert(div.innerText);
}
//修改元素内容
function updateContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerHTML="<b>你先上,皇军给你殿后,八嘎</b>";
}
function updateContext2(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerText="<b>你先上,皇军给你殿后,八嘎</b>";
}
</script>
</head>
<body>
<h3>js操作元素内容学习</h3>
<input type="button" name="" id="" value="测试获取元素内容---innerHTML&innerText" onclick="getContext()"/>
<input type="button" name="" id="" value="测试修改元素内容--innerHTML" onclick="updateContext()"/>
<input type="button" name="" id="" value="测试修改元素内容--innerText" onclick="updateContext2()"/>
<hr />
<div id="div01">
<b>皇军,前面有八路的干活。</b>
<b>皇军,前面有八路的干活。</b>
</div>
</body>
</html>
js学习之操作元素内容
最新推荐文章于 2022-05-12 14:06:13 发布