Best way to create nested HTML elements with jQuery [closed]

Answer 1

I found this solution while I was researching something else. It's part of an "Introduction to jQuery" by the creator of jQuery and uses the end() function.

$("<li><a></a></li>") // li 
  .find("a") // a 
  .attr("href", "http://ejohn.org/") // a 
  .html("John Resig") // a 
  .end() // li 
  .appendTo("ul");

Applying to your question it would be ...

$("<div><span></span></div>") // div 
  .addClass("inner") // div 
  .find("span") // span 
  .html("whatever you want here.") // span 
  .end() // div 
  .appendTo( elem ); 

Answer 2

Long string is obviously the cleanest way possible. You see the code properly nested without all those unnecessary extra noise like brackets, dollar signs and what not. Sure, it'd be advantages to be able to write it as a multiline string, but that's not possible for now. To me the point is to get rid of all the unneeded symbols. I don't know how comes the string gets messy and editing becomes a problem. If you've assigned a lot of classes you can put them on separate line:

'<div id="id-1"'
+ ' class="class-1 class-2 class-3 class-4 class-5 class-6">'
+ '</div>'

or this way:

'<div id="id-1" class="'
    + 'class-1 class-2 class-3 class-4 class-5 class-6'
+ '">'
+ '</div>'

Another option is probably to use haml on the client side, if that's possible. That way you'll have even less unneeded noise.

Answer 3

There is a third way besides long ugly strings or huge methods chained together. You can use plain old variables to hold the individual elements:

var $wrapper = $("<div/>", { class: "wrapper" }),
    $inner = $("<p/>", { class: "inner" }),
    $text = $("<span/>", { class: "text", text: "Some text" });

Then, tie it all together with append:

$wrapper.append($inner.append($text)).appendTo("#whatever");

Result:

<div class="wrapper">
  <p class="inner">
    <span class="text">Some text</span>
  </p>
</div>

In my opinion this is by far the cleanest and most readable approach, and it also has the advantage of separating the data from the code.

EDIT: One caveat, however, is that there is no easy way to mix textContent with nested elements (e.g., <p>Hello, <b>world!</b></p>.) In that case you would probably need to use one of the other techniques such as a string literal.

Answer 4

I like the following approach myself:

$('<div>',{
  'class' : 'wrapper',
  'html': $('<div>',{
    'class' : 'inner',
    'html' : $('<span>').text('Some text')
  }).add($('<div>',{
    'class' : 'inner',
    'html' : $('<span>').text('Other text')
  }))
}).appendTo('body');

Alternatively, create your wrapper first, and keep adding to it:

var $wrapper = $('<div>',{
    'class':'wrapper'
}).appendTo('body');
$('<div>',{
    'class':'inner',
    'html':$('<span>').text('Some text')
}).appendTo($wrapper);
$('<div>',{
    'class':'inner',
    'html':$('<span>').text('Other text')
}).appendTo($wrapper);

Answer 5

write them as long string and than place them in the document using a suitable jQuery function. Something like:

The problem with this approach is that you'll need a multi-line string - something Javascript doesn't support - so in reality you'll end up with:

elem.html(
'<div class="wrapper">'+
    '<div class="inner">'+
        '<span>Some text<span>'+
    '</div>'+
    '<div class="inner">'+
        '<span>Other text<span>'+
    '</div>'+
'</div>');

Using the method you suggested above, this is about as clean as I could manage to get it:

elem.append(
    $('<div/>', {'class': 'wrapper'}).append(
        $('<div/>', {'class': 'inner'}).append(
            $('<span/>', {text: 'Some text'})
        )
    )
    .append(
        $('<div/>', {'class': 'inner'}).append(
            $('<span/>', {text: 'Other text'})
        )
    )
);

The other advantage to doing this is that you can (if desired) get direct references to each newly created element without having to re-query the DOM.

I like to write polyglots, so to make my code re-usuable I usually do something like this, (as jQuery's .html() doesn't support XML):

// Define shorthand utility method
$.extend({
    el: function(el, props) {
        var $el = $(document.createElement(el));
        $el.attr(props);
        return $el;
    }
});

elem.append(
    $.el('div', {'class': 'wrapper'}).append(
        $.el('div', {'class': 'inner'}).append(
            $.el('span').text('Some text')
        )
    )
    .append(
        $.el('div', {'class': 'inner'}).append(
            $.el('span').text('Other text')
        )
    )
);

This isn't very different to method #2 but it gives you more portable code and doesn't rely internally on innerHTML.

Answer 6

I like this approach

    $("<div>", {class: "wrapper"}).append(
        $("<div>", {class: "inner"}).append(
            $("<span>").text(
                "Some text"
            )
        ), 
        $("<div>", {class: "inner"}).append(
            $("<span>").text(
                "Some text"
            )
        )
    ).appendTo("body")