jquery - jquery の append() メソッドに関する問題

Question

オプション1：

  <div class="box">I'm a big box</div>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    $('</div>').append("<div class='newbox'>I'm new box by prepend</div>");
    </script>

オプション 2:

<div class="box">I'm a big box</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('.box').append("<div class='newbox'>I'm new box by prepend</div>");
</script>

質問：

オプション 1 が機能しないのに、オプション 2 が機能するのはなぜですか?

Answer 1

最初のオプションのセレクターが間違っています。<タグ セレクターを使用する場合、左中括弧と右中括弧を含める必要はありません>。文字列リテラルでタグの名前を使用するだけです。

<div class="box">I'm a big box</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $('div').append("<div class='newbox'>I'm new box by prepend</div>");
</script>

2 番目のオプションは、正しいクラス セレクターを使用しているため機能します.box。

必要に応じて、これら 2 つのアプローチを組み合わせることができます。

 $('div.box').append("<div class='newbox'>I'm new box by prepend</div>");

Answer 2

"<"で始まり で終わる文字列を jQuery に渡すと">"、jQuery はそれを HTML として解釈し、DOM フラグメントを作成しようとします。このフラグメントは DOM に追加されないため、どこにも追加されません。

おそらく、すでにページにあった div を選択したいと思うでしょう:

 $('div').append("<div class='newbox'>I'm new box by prepend</div>");

Answer 3

$('</div>')セレクターを からに変更してみてください$('<div>')

<div class="box">I'm a big box</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('<div>').append("<div class='newbox'>I'm new box by prepend</div>");
</script>

Answer 4

で試すこともできます

$('div').append("<div class='newbox'>I'm new box by prepend</div>");