改变元素内容:
- element.innerText 会去除html标签,同时如果内容有空格和换行也会去掉(非标准)
- element.innerHTML 包括html标签,同时如果内容有空格和换行会保留(W3C标准)
因此实际中会更提倡用element.innerHTML。且这两个属性是可读写的,可以获取到元素里面的内容。
<div>我叫小茗</div>
<script>
var nav = document.querySelector("div");
var btn = document.querySelector("button");
btn.onclick = function(){
nav.innerText = "我叫翠花";
}
</script>
element.innerText和element.innerHTML区别示例:
<div>我叫小茗</div>
<button>改名</button>
<script>
var nav = document.querySelector("div");
var btn = document.querySelector("button");
btn.onclick = function(){
nav.innerHTML = "我叫<strong>翠花</strong>"; // 包括html标签,因此翠花会加粗显示
nav.innerText = "我叫<strong>翠花</strong>"; // 不会加粗显示,会去除html标签,输出:我叫<strong>翠花</strong>
}
</script>