效果先看
innerHTML與innerText
innerHTML
我們可以通過innerHTML獲取標簽內的全部內容，包括標簽，都以字符串的方式返回。
function test1(){
var div = document.getElementById("div");
alert(div.innerHTML)
}
innerText
通過innerText獲取標簽內的全部文本內容，以字符串的形式返回。
function test2(){
var div = document.getElementById("div");
alert(div.innerText);
}
修改標簽的內容
直接使用innerHTML="內容"和innerText="內容"即可
兩者不同的時，前者若是添加html代碼（js標簽css）會被解析，后者不會。
//innerHTML
function add1(){
var div = document.getElementById("div");
var inputObj = document.getElementById("input1");
div.innerHTML = inputObj.value;
}
//innerText
function add2(){
var div = document.getElementById("div");
var inputObj = document.getElementById("input1");
div.innerText = inputObj.value;
}
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div{
width:220px;
height: 13.75rem;
border: #000000 solid 0.0625rem;
background-color: grey;
}
</style>
</head>
<body>
<script type="text/javascript">
function test1(){
var div = document.getElementById("div");
alert(div.innerHTML)
}
function test2(){
var div = document.getElementById("div");
alert(div.innerText);
}
function add1(){
var div = document.getElementById("div");
var inputObj = document.getElementById("input1");
div.innerHTML = inputObj.value;
}
function add2(){
var div = document.getElementById("div");
var inputObj = document.getElementById("input1");
div.innerText = inputObj.value;
}
</script>
<div id="div">
嘿嘿
<i>大家好！我是齊德龍東強</i>
</div>
<button type="button" onclick="test1()">div.innerHTML獲取內容</button>
<button type="button" onclick="test2()">div.innerText獲取文本</button>
<br>
<input type="text" id="input1" value="支持html代碼"><button type="button" onclick="add1()">innerHTML添加</button>
<button type="button" onclick="add2()">innerText添加</button>
</body>
</html>