jquery - JQueryは自己終了Divタグをサポートしていますか

Question

jQuery が自己終了 div タグをサポートしていないようであることに驚きました。簡単な例を次に示します。

    <div id="div1" />
    <div id="div2" />

<script>
$("#div1").html("hello");
$("#div2").html("world");
</script>

これを実行すると、div2 が DOM から削除されます。

HTML 5 では自己終了 div がサポートされていないことを読みましたが、それでもこの動作には驚きました。

jquery がこのように動作する理由はありますか?

score 2 · Accepted Answer

HTML 5 は自己終了 div をサポートしていないため、HTML コードは次のように解釈されます。

<div id="div1">
    <div id="div2">
    </div>
</div>

それで、

$("#div1").html("hello");

「こんにちは」に置き換えるdiv id="div2"と、表示されているものが表示されます。

score 1 · Accepted Answer

これは jQuery とは関係ありません。

ドキュメントタイプが HTML5 の場合、ブラウザはレンダリング前に自己終了 div タグを取り除きます。jQuery は、これらの要素がブラウザーによって取り除かれたバージョンの DOM のみを認識します。

score 1 · Accepted Answer

これは jQuery とは関係ありません。あなたが提供した無効な HTML をブラウザがどのように解釈するかを見ると (少なくとも Chrome では):

<div id="div1">
  <div id="div2">
  </div>
</div>

したがって、のを設定するhtml()と、の子としてレンダリングされるため、#div1クリアされます。#div2#div1

document.getElementById("div1").innerHTML = "hello";
document.getElementById("div2").innerHTML = "world";

score 1 · Accepted Answer

HTML を解析するのは jQuery ではありません。ブラウザです。ブラウザは、XHTMLmime タイプで提供されない限り、自己終了マークアップを認識しません (当然のことです)。HTMLを次のように解釈します

<div id="div1">
  <div id="div2">
    <script>
      ...
    </script>
...

スクリプトの最初の行は（正しく）それを次のように置き換えます

<div id="div1">
  hello
</div>

スクリプトの 2 行目ではが見つからない#div2ため、何も実行されません。

4 に答える 4