您的位置：首页 > Web前端 > HTML

innerText 与 innerHtml的区别（二）

2016-09-17 23:16 316 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： textContent innerText innerHtml

相关文章推荐

新的分享

章节导航

innerText 与 innerHtml的区别 （二）

innerText 与 innerHtml的区别（二）