如何在将变量作为内容传递时使用jQuery将HTML元素添加到div中？

Question

Say I have a list like so:

<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>

I want to be able to add another li element with the class list-item and maybe the data-role collapsible at the end of the list. But, I want to pass the contents of a variable to the inside of the new li tag. Say the variable is var myVariable = "Contents of Variable"; Is there a way to do this using jQuery and/or JavaScript?

Answer 1

You could clone one of the existing tags:

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

And with plain JavaScript:

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

Answer 2

Try this:

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

Answer 3

Are you trying to do this 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

Also

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

create('my content')

Demo: Fiddle

Answer 5

您可以使用

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