innerHTML&outerHTML&innerText&outerText实例辨析

有时候做项目会用到上述四个DOM属性来获取HTML文档里的一些内容，但对他们的区别还是有些模糊，所以写了几个简单的函数，通过打印在控制台上的结果看看他们之间的区别。

代码：

<div id="outer">
    outer
    <p id="innerone">inner one</p>
    between
    <p id="innertwo">inner two</p>
  </div>
  <div>
    <button onclick="showInnerHTML()">innerHTML</button>
    <button onclick="showOuterHTML()">outerHTML</button>
    <button onclick="showInnerText()">innerText</button>
    <button onclick="showOuterText()">outerText</button>
  </div>

var showInnerHTML = function(){
    console.log(document.getElementById("outer").innerHTML);
  }
  var showOuterHTML = function(){
    console.log(document.getElementById("outer").outerHTML);
  }
  var showInnerText = function(){
    console.log(document.getElementById("outer").innerText);
  }
  var showOuterText = function(){
    console.log(document.getElementById("outer").outerText);
  }

innerHTML

控制台结果：

总结：获取当前节点下子节点的HTML文本，如果子节点只有文本节点，则它的输出效果和innerText相同

outerHTML

控制台结果：

总结：获得包括当前节点本身以及节点下子节点的HTML文本

innerText

控制台结果：

总结：获得当前节点子节点内的纯文本内容

outerText

控制台结果：

总结：获得当前节点以及子节点内的纯文本内容（总感觉和innerText的输出效果是一样的，没想到什么例子可以有不同的效果，如果你有，欢迎评论(#^.^#)）

疑问：可以看到innerText的输出结果中，中间有一个空行，并不是很懂……

虽然是简单的例子，但是通过代码把概念区分了一下，也是挺好的~如果有写得不足的，欢迎指正留言~不胜感激！