javascript - jqueryオブジェクトから要素を取り出すメソッド

Question

 $('li').add('<p id="new">new paragraph</p>')
 .css('background-color', 'red');

新しい段落が作成され、背景色が変更されましたが、まだページに表示されません。どのような方法/手順でページに配置できますか。

Answer 1

あなたはそれを間違っています。<li>要素に新しい段落を追加する場合は、次を使用します。

$('<p id="new">new paragraph</p>').css('background-color', 'red').appendTo('li');

Answer 2

appendの代わりに使用add

$('li').append('<p id="new">new paragraph</p>')
 .css('background-color', 'red');

Answer 3

これは意図した操作だったと思います：

$('li').append('<p id="new">new paragraph</p>').css('background-color', 'red');

Answer 4

問題はadd()、要素を別の要素に追加しないことです。要素を jQuery コレクションに追加します。したがって、<p>要素を li 要素のリストの最後に追加しています。例えば〜[li,li,li,p]

add()のjQueryドキュメントから

。追加（）

.add( selector )Returns: jQuery

説明: 一致した要素のセットに要素を追加します。

あなたが欲しいのはappend（）です

.append()

.append( content [, content ] )Returns: jQuery

説明: パラメータで指定されたコンテンツを、一致した要素のセット内の各要素の末尾に挿入します。

だからあなたのコードはただ

$('li').append('<p id="new">new paragraph</p>').css('background-color', 'red');

実行例: jsFiddle