jquery - リスト項目内にjqueryを使用してdivを追加する

Question

リストアイテムがあります：

<li class="sortedli">Call Type</li>

リスト内のテキストの両側に 2 つの div を追加したい:

<li class="sortedli">
    <div class="sel-display-on">&nbsp;</div>
                Call Type
    <div class="sel-trash-on">&nbsp;</div>
</li>

Jqueryを使用してこれを追加するにはどうすればよいですか?

Answer 1

prepend()とappend();を使用します。

$(".sortedli").prepend("<div class=\"sel-display-on\"></div>");
$(".sortedli").append("<div class=\"sel-trash-on\"></div>");

フィドルの例

Answer 2

これはテストされていませんが、次のことをお勧めします。

var li = $('.sortedli').first();
$('<div />', {'class' : 'sel-display-on', 'text' : '&nbsp;'}).prependTo(li);
$('<div />', {'class' : 'sel-trash-on', 'text' : '&nbsp;'}).appendTo(li);

また、次を使用することもできます。

$('.sortedli').html(
    function(i,h) {
        return '<div class="sel-display-on">&nbsp;</div>' + h + '<div class="sel-trash-on">&nbsp;</div>';
    });

参考文献:

• appendTo().
• html().
• prependTo().

Answer 3

あなたはこのようにすることができます

$("#content ul").append('< li > divs ... < / li >');