innerText和innerHTML改变元素内容

1、innerText:

以点击按钮，div里的文字显示当前时间为例：

<button>显示当前系统时间</button>
<div>某个时间</div>

js部分代码：

 // 获取元素
  var btn = document.querySelector('button');
  var div = document.querySelector('div')
 // 绑定事件
  btn.onclick = function () {
      div.innerText = getDate();
  }
 //封装函数获取当前时间
  function getDate() {
    var date = new Date();
     // 年月日
    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];
   }

不绑定点击事件直接改变内容：

<p>123</p>

js部分：

 //元素不添加事件
 var p = document.querySelector('p');
 p.innerText = getDate();

2、innerText和innerHTML的区别：

innerText不识别html标签

<div></div>
<script>
  // innerText和innerHTML的区别
  // innerText不识别html标签
  var div = document.querySelector('div');
  div.innerText = '<strong>今天</strong> 天气真好'
</script>

结果如下： 

innerHTML识别html标签

 div.innerHTML = '<strong>今天</strong> 天气真好'

结果如下： 

 

3、 这两个属性是可读写的，可以获取元素里面的值，innerText不识别html标签,去除空格和换行，innerHTML保留html标签同时包括空格和换行

  <div>
        <span>
            我是文字
        </span>

    </div>
    <script>
        // innerText和innerHTML的区别
        // 1、innerText不识别html标签,去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天</strong> 天气真好'
        // div.innerHTML = '<strong>今天</strong> 天气真好'
        //这两个属性是可读写的，可以获取元素里面的值
        console.log(div.innerText);
        console.log(div.innerHTML);
    </script>