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 并且最后可能还有数据 Angular 色 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);