ポイント（c）を終えDOMの疑問

innerHTMLプロパティとouterHTML

私は少し、よく知られた話をしましょう、innerHTMLプロパティとouterHTML内容はDOMサブツリーに解析され、第二は、

<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>

結果の実装は以下のようになります。

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

outerHTMLの実行

<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>

結果の実装は以下のようになります。

<p>txt</p>

元のdivが消え、すべてが交換されて全体の外側のHTMLノードの呼び出しがあります。しかし、そこのdivと削除されていなかったが、あなたはにconsole.log（TXT）を介してそれを見ることができます。
さて、これらはよく知られています。
使用のinnerHTMLプロパティまたはouterHTMLプロセスでは、スクリプトについては、小さなディテールがあるだろう、ではなく、スクリプトのスコープ内（これも知られている）の疑いie8-。

小さなディテール：

<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>

そのようなコード、エラーを実行するブラウザは、4行目の誤差、第四の修正挙動は以下のように、エラーはありません。

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

あなたは、エスケープシンボル、一方、間違って行くことはできませんまた、エスケープ文字を必要としない第3の行の末尾を追加する必要があります。
その理由が発生した</スクリプト>タグを解析するブラウザは、最初の行の最後とみなされるの<script>エコー、それはまた良く知られている必要がありますこのような理由のために、それは注目に値するであることを念頭に置いて、innerHTMLの時間で、そこに</ script>の場合は、エスケープすることを忘れないでください。

innerTextとouterText

両者の最大の違いは、それらがのinnerHTMLプロパティとouterHTML上記と同様のノード自体への呼び出し、変更するかどうかである他の説明を。
outerText仕様を書かれていない、それが推奨されていません、そして消えて自ノードを呼び出すために導くことができます。
innerText異なりのTextContent概要：
①コンテンツの<script>と<スタイル>タグ、のinnerTextは、後者の意志を無視していません。
②そこにCSSのコンテンツのinnerText場合は、それが逆流、再描画ページをトリガーします（ブラウザが再描画される要素の新しい属性、要素プレゼント新しい外観による）、後者の意志がない
③innerText隠されたスタイルを返さない、後者は理解していませんので、すべて後者戻ること
④ieは<= 11、のinnerTextは、元のテキストはすべて破壊され、修飾ノードを行います。
⑤可能な別のブラウザのため、テキスト出力形式の両方がわずかに異なっています