DOM doubts finishing point (c)

innerHTML and outerHTML

Let me talk a little well-known, innerHTML and outerHTML contents will be parsed into a DOM sub-tree, and the second is,

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;"></div>
<script type="text/javascript">
    let txt = document.getElementById("txt");
    txt.innerHTML = "<p>txt</p>";
</script>

Implementation of the results is equal to:

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;">
    <p>txt</p>
</div>

The outerHTML execution

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;"></div>
    <script type="text/javascript">
        let txt = document.getElementById("txt");
        txt.outerHTML = "<p>txt</p>";
    </script>

Implementation of the results is equal to:

<p>txt</p>

Is the original div disappears, the entire outer HTML node calls all been replaced. But the div there and had not been removed, you can see it through console.log (txt).
Well, these are well known.
In use innerHTML or outerHTML process, there will be a small detail, about the script, but not in the script scope ie8- no question of (this is also known).

nitty gritty:

<script type="text/javascript">
    let txt = document.getElementById("txt");
    txt.innerHTML = "<div id=\"txt1\">1</div>";
    txt.innerHTML = "<script id=\"txt2\">var a = 1;</script>";
</script>

Such a code, the browser will run error, an error in the fourth row, fourth modify behavior is as follows, the error will not:

txt.innerHTML = "<script id=\"txt2\">var a = 1;<\/script>";

You need to add an escape symbol, the other hand, the end of the third line does not need an escape character also can not go wrong.
The reason is encountered </ script> the browser will parse tag will be considered the end of the first line and the <script> echoes, for this reason it should also be well known, it is worth noting that in mind, with innerHTML time, If there </ script>, remember to escape.

innerText and outerText

The biggest difference between the two is whether they will change the call to the node itself, similar to the above innerHTML and outerHTML of the other described.
outerText not written specification, it is not recommended, and can lead to call its own node disappear.
innerText differs textContent summary:
① content <script> and <style> tag, innerText ignored, the latter will not.
② If there css content innerText, it will trigger reflux, redraw page (the browser will be redrawn according to the new attribute of the element, the element presents a new look), the latter will not
③innerText not return hidden style, the latter do not understand , so that the latter returns all
④ie <= in 11, innerText the original text will make the modified node, all destroyed.
Both ⑤ possible because of the different browsers, text output format is slightly different