innerText 与 innerHtml不仅在获取元素文本上有区别,而且在设置上同样有区别。
1、innerText 在设置HTML标签时,会将<>进行转义,在输出的时候会原样输出,并不会解析HTML标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
</div>
</body>
<script>
var box = document.getElementById("box");
box.innerText = "<p>这是P标签</p><p>这是P标签</p><p>这是P标签</p>";
</script>
</html>
打印结果为:
<p>这是P标签</p><p>这是P标签</p><p>这是P标签</p> <p>这是P标签</p><p>这是P标签</p><p>这是P标签</p>
2、innerHtml 在设置HTML标签时,浏览器会将HTML标签名解析成对应的标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
</div>
</body>
<script>
var box = document.getElementById("box");
box.innerHTML = "<p>这是P标签</p><p>这是P标签</p><p>这是P标签</p>";
</script>
</html>
打印的结果为:
这是P标签
这是P标签
这是P标签
3、封装兼容版本的innerText,因为低版本的火狐浏览器不支持innerText,而是支持textContent
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
</div>
</body>
<script>
var box = document.getElementById("box");
var str = "<p>这是P标签</p><p>这是P标签</p><p>这是P标签</p>";
setText(box, str);
function setText(element, value) {
// 因为在IE8及之前的浏览器中获取element.innerText的值是undefine 所以判断类型比较好
if(typeof element.innerText == "string") {
element.innerText = value;
}else {
element.textContent = value;
}
}
</script>
</html>