目录
1、innerText
1.1、概述
HTMLElement接口的innerText属性表示一个节点及其后代的呈现文本内容。作为一个getter，它近似于用户使用光标高亮显示元素内容，然后将其复制到剪贴板所获得的文本。作为setter，它将用给定的值替换元素的子元素，将任何换行符转换为<br>元素。
1.2、语法
var renderedText = HTMLElement.innerText;
HTMLElement.innerText = string;
1.3、输出值
一段 DOMString 表示一个元素中已被渲染的内容。如果元素自身没有被渲染 (e.g 被从文档中删除或没有在视图中显示)，这时返回值与 Node.textContent 属性相同。
1.4、示例
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector("button");
var div = document.querySelector("div");
// 2.注册事件
btn.onclick = function () {
div.innerText = "2019-6-6";
};
function getDate() {
var date = new Date();
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var day = date.getDay();
return "今天是：" + year + "年" + month + "月" + dates + "日 " + arr[day];
}
</script>
</body>
2、innerHTML
2.1、概述
Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。
2.2、语法
const content = element.innerHTML;
element.innerHTML = htmlString;
2.3、返回值
DOMString 包含元素后代的 HTML 序列。设置元素的 innerHTML 将会删除所有该元素的后代并以上面给出的 htmlString 替代。
2.4、异常
SyntaxError：当 HTML 没有被正确标记时，设置 innerHTML 将会抛出语法错误。
NoModificationAllowedError：当父元素是 Document 时，设置 innerHTML 将会提示不允许修改。
2.5、示例
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector("button");
var div = document.querySelector("div");
// 2.注册事件
btn.onclick = function () {
div.innerHTML = getDate();
};
function getDate() {
var date = new Date();
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var day = date.getDay();
return "今天是：" + year + "年" + month + "月" + dates + "日 " + arr[day];
}
</script>
</body>
3、区别
3.1、获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
3.2、设置内容时的区别：
innerText不会识别html，而innerHTML会识别
4、示例
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector("div");
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = "<strong>今天是：</strong> 2019";
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector("p");
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
