<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js操作元素内容</title>
<style type="text/css">
#div01{
width: 200px;
height: 200px;
border: solid 1px orange;
}
</style>
<script type="text/javascript">
//获取元素内容
function getContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素内容
alert(div.innerHTML);//<b>好好学习,天天向上</b>
alert(div.innerText);//好好学习,天天向上
}
//修改元素内容
function updateContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象
div.innerHTML="<b> 学习?学个屁</b>";
//div.innerHTML=div.innerHTML+"<b> 学习?学个屁</b>";追加内容
}
function updateContext2(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象
div.innerText="<b> 学习?学个屁</b>";
}
</script>
</head>
<body>
<h3>操作元素内容学习</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();" /> <!--<b> 学习?学个屁</b>-->
<hr />
<div id="div01">
<b>好好学习,天天向上</b>
</div>
</body>
</html>
操作元素内容学习:
获取元素对象
获取
元素对象名.innerHTML//返回当前元素对象的所有内容,包括HTML标签
元素对象名.innerText//返回当前元素对象的文本内容,不包括HTML标签
修改
元素对象名.innerHTML=“新的值”//会将原有内容覆盖,并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+“新的值”//追加效果
元素对象名.innerText=“新的值”//会将原有内容覆盖,但HTML标签不会被解析,会作为普通文本显示。