innerText和innerHTML,textContent
2019-05-10 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> innerText和innerHTML,textContent </title>
<style>
.box {
width: 300px;
height: 300px;
background-color: #f00;
}
</style>
</head>
<body>
赋值：
innerText：如果赋的是标签，会把标签也当文本
innerHTML：如果赋的是标签，会把标签解析出来
textContent：其实跟innerText是一毛一样的功能.
textContent是火狐弄的标准（标准语法），IE8之前不支持
innerText是IE弄的（非标准语法），火狐42版本之前不支持
它们都不用，用innerHTML，因为它没有兼容性问题 -->
<div class="box">
<h1>我是h1</h1>
<p>你是p</p>
</div>
<button>我是button</button>
<input type="button" value="获取" id="btn1">
<input type="button" value="设置" id="btn2">
<input type="button" value="修改button文字" id="btn3">
<script>
//找button
var button = document.getElementsByTagName('button')[0];
//找到div
var box = document.getElementsByClassName('box')[0];
//获取
document.getElementById('btn1').onclick = function () {
console.log(box.innerText); //只能获得纯文本
console.log(box.innerHTML); //带标签
console.log(box.textContent); //只能获得纯文本
};
// 设置
document.getElementById('btn2').onclick = function () {
// box.innerText = "<h1>我是新内容</h1>"; // 如果赋的是标签，会把标签也当文本一起显示出来
// box.innerHTML = "<h1>我是新内容</h1>"; // 用 = 会覆盖原来div里的所有内容;
// box.innerText += "<h1>我是新内容</h1>"; // 给div添加一个子元素;
// += 的本质 是先取这个值，再加上一个值
// box.innerText = "我是h1ni 是p" + "<h1>我是新内容</h1>"; // 用 = 会覆盖原来div里的所有内容;打印成字符串;
// box.innerHTML += "<h1>我是新内容</h1>"; // 给div添加一个子元素;
box.textContent = "<h1>我是新内容</h1>"; //和 innerText 的功能一样 如果赋的是标签，会把标签也当文本一起显示出来
};
//修改button
document.getElementById('btn3').onclick = function () {
// console.log(button.innerText); // 我是button
// console.log(button.innerHTML); // 我是button
button.innerHTML = "新文本"; // innerHTML 用 = 会覆盖原来 button 里的所有内容;
};
</script>
</body>
</html>
