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

您可以克隆现有标签之一：

$('#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

您是否正在尝试做这个FIDDLE？

var myVariable = "Contents of Variable";

x(myVariable);

function x(obj) {
    $('#my-list').append('<li class="list-item" data-role="collapsible">' + obj + '</li>');
}

Answer 4

还

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

create('my content')

演示：小提琴

Answer 5

您可以使用

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