<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM编程-innerHTML和innerText操作div和span</title>
<!--
相同点：都是设置元素内部内容
innerHTML :会将后面的字符串当作一段HTML代码解释执行；
innerText :即使后面是一段HTML代码也会将其看作普通的字符串
divElt.innerHTML="<font color="red">用户名不能为空！</font>";
divElt.innerText="<font color="red">用户名不能为空！</font>";
-->
<!--css中的id样式块-->
<style type="text/css">
#div1{
background-color: blue;
width: 300px;
height: 300px;
border: 1px black solid;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
//页面加载完毕执行回调函数
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
//设置div内容:第一步：获取div对象
var divElt =document.getElementById("div1");
//第二步：使用innerHTML属性来设置元素内部的内容
divElt.innerHTML="<font color='red'>用户名不能为空！</font>";
//divElt.innerText="<font color='red'>用户名不能为空！</font>";
}
}
</script>
<input type="button" value="设置div中的内容" id="btn"/>
<div id="div1"></div>
</body>
</html>
