CODEWITHSUNDEEP
javascriptjqueryhtmlfunctional-programmingchaining
John Smith
John Smith

Reputation: 8821

How to construct a new HTML element in jQuery?

I have some code similar to this:

var glyph = isApple ? '<span class="glyphicon glyphicon-apple"></span>' : '<span class="glyphicon glyphicon-banana"></span>';
var newFruit = '<li class="list-group-item">' + glyph + '<span class="badge">' + score + '</span>' + name + '</li>'
$('#fruitList').append(newFruit);

Just a lot of gross concatenation that is hard to read and follow. Is there a way to functionally create these elements, and if so, how? Also, I'm curious of the speed of doing so, because if it is much slower than what I'm doing then I just won't bother.

I'm looking for something like this, for example:

var newElement = li().class("list-group-item").value(name);
newElement.span().class(isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user");
newElement.span().class('badge').value(score);
$('#fruitList').append(newElement);

Now obviously the above is not good or probably even right but hopefully it gets the idea across. Basically a way of chaining functions to create new elements that avoids the mess of concatentations for creating custom HTML to insert.

Upvotes: 0

Views: 111

Answers (5)

Stryner
Stryner

Reputation: 7318

There is an overload of the jQuery function that allows you to do create an element and specify its properties. The following would replicate your example:

$('<li>', {
    class: "list-group-item",
    html: $('<span>', {
        class: isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user"
    })
    .after($('<span>', {
        class: "badge",
        text: score
    }))
    .after(name)
});

Upvotes: 0

Malk
Malk

Reputation: 11983

Generally speaking, arrays are faster than string concatenation which is faster than DOM manipulation.

function getNewItemString(glyph,score,name){
   return [
      '<li class="list-group-item">',
      '<span class="glyphicon ',
      glyph,
      '"></span>',
      '<span class="badge">',
      score,
      '</span>',
      name,
      '</li>'
   ].join('');
}

$('#fruitList').append(getNewItemString('glyphicon-apple', 20, 'player1'));
$('#fruitList').append(getNewItemString('glyphicon-banana', 0, 'player2'));

Upvotes: 0

Jasper Giscombe
Jasper Giscombe

Reputation: 313

This structure should help, the trick is making sure the parent element is appended before the child:

var newElement = document.createElement('li');
$(newElement).addClass('list-group-item');
$(newElement).html(name);

$('#fruitList').append(newElement);

var newSpan = document.createElement('span');
var apple = isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user";
$(newSpan).addClass(apple);
$(newSpan).addClass('badge');
$(newSpan).html(score)

$(newElement).append(newSpan);

Upvotes: 1

afrin216
afrin216

Reputation: 2335

Something like this?

$('<li>', {
        html: $('<a>', {
             href: item.href,
             text: item.title
        })
    });

This puts an a tag within an li tag. You can modify this as per your needs

Upvotes: 1

r043v
r043v

Reputation: 1869

var $li = $("<li/>",{title:"woot"}).addClass("list-group-item").value(name);
$li.append( $("<span/>").addClass(isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user") );
$("<span/>").addClass('badge').value(score).appendTo( $li );
$('#fruitList').append($li);

Upvotes: 0

Related Questions