如何在將變量作爲內容傳遞時使用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> 

我希望能夠與類list-item，也許在列表的最後的數據角色collapsible再添li元素。但是，我想將變量的內容傳遞給新的li標記的內部。說變量是var myVariable = "Contents of Variable";有沒有辦法使用jQuery和/或JavaScript來做到這一點？

Answer 1

試試這個：

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

Answer 2

你可以複製現有的標籤之一：

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

演示：Fiddle

Answer 5

您可以使用

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