获取元素内容
<div>
我是div
<h1>我是标题</h1>
<p>我是段落</p>
</div>
innerHTML
innerHTML获取的内容包含标签 不会去除两端空格
console.log(oDiv.innerHTML);
innerText
innerText获取的内容不包含标签 会去除两端空格
console.log(oDiv.innerText);
textContent
textContent获取的内容不包含标签 不会去除两端空格
console.log(oDiv.textContent);
设置元素内容
无论通过innerHTML/innerText/textContent设置内容, 新的内容都会覆盖原有的内容
区别:
- 如果通过innerHTML设置数据, 数据中包含标签, 会转换成标签之后再添加
- 如果通过innerText/textContent设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置
处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
// 判断当前浏览器是否支持 innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}