javascript - 変数をコンテンツとして渡しながら、jQuery を使用して HTML 要素を div に追加するにはどうすればよいですか?

Question

次のようなリストがあるとします。

<ul id="my-list">
    <li class="list-item" data-role="collapsible">List Item</li>
    <li class="list-item" data-role="collapsible">List Item</li>
    <li class="list-item" data-role="collapsible">List Item</li>
</ul>

リストの最後にli、クラスlist-itemとおそらくデータロールを含む別の要素を追加できるようにしたいと考えています。でも、新しいタグcollapsibleの中に変数の中身を渡したい。li変数はvar myVariable = "Contents of Variable";、jQuery や JavaScript を使用してこれを行う方法はありますか?

Answer 1

既存のタグの 1 つを複製できます。

$('#my-list li').first().clone().text(myVariable).appendTo('#my-list');

プレーンな JavaScript を使用すると、次のようになります。

var list = document.getElementById('my-list');
var elem = list.firstChild.cloneNode();
elem.textContent = myVariable;
list.appendChild(elem);

Answer 2

これを試して：

var myVariable = "Contents of Variable";
$("#my-list").append("<li class='list-item' data-role='collapsible'>" + myVariable + "</li>");

Answer 3

また

function create(content){
    $('<li />', {
        class: 'list-item',
        'data-role': 'collapsible'
    }).html(content).appendTo('#my-list')
}

create('my content')

デモ:フィドル

Answer 4

使用できます

$('#my-list').append('<li class="list-item" data-role="collapsible">' + myVariable + '</li>');