innerHTML、innerText、outerHTML、outerText差別

利用一段程式碼來解釋四個的差異在哪

 test1
 
test2

innerHTML
innerText
outerHTML
outerText

將印出如下：

innerHTML：   <span style="color:red">test1</span>

                        <p>test2</p>

innerText：         test1

                        test2

outerHTML：    <div id="test">

                          <span style="color:red">test1</span>

                          <p>test2</p>

                       </div>

outerText：        test1

                       test2

由此可知，innerText和outerText輸出的結果是一樣的

innerHTML會把div內的HTML標籤給輸出

而outerHTML是會把整個div區塊給輸出連自己本身也是一樣