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代碼，也只是將其當做普通的字符串來看待。