Dadas estas variables de javascript:
var div_id = "my_div"; var h1_class = "my_header"; var a_class = "my_a_class"; var a_string = "teststring";y este elemento de página:
<div id="container"></div>Quiero construir esta estructura html con jQuery:
<div id="container"> <div id="my_div"> <h1 class="my_header"> <a href="/test/" class="my_a_class">teststring</a> </h1> </div> </div>¿Cuál es la mejor y más legible forma de encadenar los comandos aquí?
ACTUALIZADO
JSON
var widgets = [{ "div" : { "id" : "my-div-1" }, "h1" : { "class" : "my-header" }, "a" : { "class" : "my-a-class", "text" : "google", "href" : "http://www.google.com" } }, { "div" : { "id" : "my-div-2" }, "h1" : { "class" : "my-header" }, "a" : { "class" : "my-a-class", "text" : "yahoo", "href" : "http://www.yahoo.com" } }]; $(function() { $.each(widgets, function(i, item) { $('<div>').attr('id', item.div.id).html( $('<h1>').attr('class', item.h1.class).html( $('<a>').attr({ 'href' : item.a.href, 'class' : item.a.class }).text(item.a.text))).appendTo('#container'); }); });Esta es la forma más ordenada de encadenar comandos en torno a la salida deseada:
var div_id = "my_div"; var h1_class = "my_header"; var a_class = "my_a_class"; var a_string = "teststring"; var new_div = $("<div>").attr("id",div_id).append( $("<h1>").addClass(h1_class).append( $("<a>").attr("href","/test/").addClass(a_class).text(a_string) ) ); $("div#container").append(new_div);No necesariamente el más conveniente, pero ciertamente legible.
Use wrapInner() y ajuste de adentro hacia afuera.
var div_id = "my_div", h1_class = "my_header", my_a_class = "my_a_class"; $('#container').wrapInner('<a href="/test/" class="' + my_a_class + '">'+a_string+'</a>').wrapInner('<h1 class="' + h1_class + '"/>').wrapInner('<div id="' + div_id + '"/>');