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

Answer 1

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 = $("
", { class: "wrapper" }),
    $inner = $("
", { class: "inner" }),
    $text = $("", { class: "text", text: "Some text" });

Then, tie it all together with append:

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

Result:

  

    Some text
  

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

Hello, world!

.) In that case you would probably need to use one of the other techniques such as a string literal.