innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: aqua;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
//设置div内容
//1、获取div对象
var divElt = document.getElementById("div1");
//使用innerHTML属性来设置元素内部的内容
divElt.innerHTML = "<font color='red'>这是innerHTML</font>";
}
}
</script>
<input type="button" value="设置div中的内容" id="btn" />
<div id="div1"></div>
</body>
</html>
点击按钮：
innerText
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: aqua;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
//设置div内容
//1、获取div对象
var divElt = document.getElementById("div1");
//使用innerText属性来设置元素内部的内容
divElt.innerText = "<font color='red'>这是innerText</font>";
}
}
</script>
<input type="button" value="设置div中的内容" id="btn" />
<div id="div1"></div>
</body>
</html>
innerText和innerHTML属性的区别
相同点：都是设置元素内部的内容。
不同点：innerHTML会把后面的"字符串“当做一段HTML代码解释并执行。innerText是即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。