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>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/pilgrim_121/article/details/113100791