What is the correct way to make new elements with jQuery?

Question

I am wondering what is the correct way to make new elements with jQuery. For example, say that I have a table, into where I want to append some rows according to a list of objects that I have, so the way I do it currently is like so:

var list =
[
    {
        name: 'Banana',
        cost: 100
    },
    {
        name: 'Apple',
        cost: 200
    },
    {
        name: 'Orange',
        cost: 300
    }
];

var appendThis = '';

for(var key in list)
{
    var product = list[key];

    appendThis += '<tr>';
    appendThis += '<td>' + product.name + '</td>';
    appendThis += '<td>' + product.cost + '</td>';
    appendThis += '</tr>';
}

$('#producttable').empty().append(appendThis);

Fiddle: https://jsfiddle.net/ahvonenj/ywjbrrak/

But I have heard that concatenating string and appending the rows like that is a good way to do it and instead I should create tr and td elements, into which I append the data from the list and then append those elements in to the HTML table.

So if that is the seemingly correct way to do it, how exactly is it done? I have only ever created div elements programmatically with $('</div>'), but I am not sure how to create a tr like that and on top of that append the programmatically created td in to the programmatically created tr.

Does it work like this perhaps:

var $row = $('</tr>').append($('<\td>').append('TD CONTENT'));

Seems correct, you could also do `$('', {html : $('', {text : 'TD CONTENT''})})` etc. — adeneo, Oct 12 '15 at 10:23
@adeneo That html: and text: is what I was looking for. Could you refer me to a jquery documentation about these `$('')` things? — Swiffy, Oct 12 '15 at 10:24
Nothing wrong with what you are doing. The answers you are getting don't mean they are the most efficient way to do this — charlietfl, Oct 12 '15 at 10:43
There is a stackOverflow question answering that question pretty well, with performance studies. http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent — Bity, Oct 12 '15 at 10:25

score 4 · Accepted Answer · answered Oct 12 '15 at 10:23

4

You can create a new element using the syntax $("<element/>"):

$('#producttable').empty();

for(var key in list)
{
    var product = list[key];

    var $tr = $("<tr/>");
    $tr.append($("<td/>").text(product.name));
    $tr.append($("<td/>").text(product.cost));

    $('#producttable').append($tr);
}

answered Oct 12 '15 at 10:23

Curtis

101,612
66
270
352

I will accept this, if you can refer me to the jquery documentation about these `$('')`'s. – Swiffy Oct 12 '15 at 10:26
@Piwwoli The main jQuery doc mentions it several times: http://api.jquery.com/jQuery/ – Curtis Oct 12 '15 at 10:27
1

Thanks both of you. Apparently I never bothered to scroll down enough. – Swiffy Oct 12 '15 at 10:30

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

instead of $('</tr>').append($('<\td>').append('TD CONTENT'));

you should try: $('<tr>').append($('<td>').append('TD CONTENT'));

you don't need to close tags. besides that.. \t will result in the tab character rather than your desired <td>

you should checkout this question: jQuery document.createElement equivalent?

edited May 23 '17 at 12:14

Community

1
1

answered Oct 12 '15 at 10:24

GottZ

4,824
1
36
46

Ahh sorry I have if the wrong way. I meant `` instead of `` – Swiffy Oct 12 '15 at 10:27
@Piwwoli you actually don't need to close tags when using one of theese methods for creating a single element: http://api.jquery.com/category/manipulation/dom-insertion-inside/ like.. `$("
")` is 100% equal to: `$("
")` or `$("
")`
– GottZ Oct 12 '15 at 10:35

What is the correct way to make new elements with jQuery?

2 Answers2