js进阶Web APIs---innerText与innerHTML的区别

1.设置（写）元素内容时：

• innerText：不识别html标签
• innerHTML：识别html标签

<div id="first"></div>
<div id="second"></div>

<script>
    var firstDiv = document.querySelector('#first');
    firstDiv.innerText = '<strong>今天是：</strong> 2021';

    var secondDiv = document.querySelector('#second');
    secondDiv.innerHTML = '<strong>今天是：</strong> 2021';
</script>
    

2.获取（读）元素内容时：

• innerText：去除空格换行及html标签（只留纯有效内容）
• innerHTML：原样输出

<p>
 我是文字
    <span>123</span>
</p>

<script>
    var p = document.querySelector('p');
    console.log(p.innerText);
    console.log(p.innerHTML);
</script>