jQuery dinámicamente crear la tabla/tr/td o etc y añadir atributos

Question

En un ejemplo que estoy teniendo esta estructura (pequeño ejemplo):

<table id=example> 
<tr class="blah test example"><td>Test1</td><td><a href="url">LINK</a>Test11</td></tr> 
<tr class="blah test example"><td>Test2</td><td><a href="url">LINK</a>Test22</td></tr> 
<tr class="blah test example"><td>Test3</td><td><a href="url">LINK</a>Test33</td></tr> 
</table> 

En jQuery me gustaría crear de forma dinámica como:

var test = "<table id=" + someIDVar + ">" 
      + "<tr class=" + classOneVar 
+ classTwoVar + classThreeVar + ">".... 

y etc ... (muchas otras cosas para escribir). Después yo sólo lo añaden:

$(".somePlaceInHtml").append(test); 

Entonces, ¿hay alguna otra manera de escribir una estructura de este tipo de forma dinámica con jQuery? Este es un problema para mí porque tengo una estructura grande, no tan pequeña como la que mostré en el ejemplo. La razón principal es que quiero obtener una mejor legibilidad para mí y para otros desarrolladores que mantendrán este código.

Answer 1

¿Se puede hacer una "plantilla" de la cadena? En caso afirmativo, guárdelo en una variable "constante" (por ejemplo, definida en el alcance global) que contenga marcadores de posición para variables reales, como {0}, {1}, etc., ya que lo usaría en el método string.format() de C#.

Por lo tanto, tendría un código como éste:

var rowTemplate = "<tr><td>{0}</td><td>SomePredefinedText {1}</td></tr>"; 
var alternateRowTemplate = "<tr><td class='a'>{0}</td><td>SomewhatDifferent {1}</td></tr>"; 
...... somewhere deep in your code 
$("#someElement").append(
     rowTemplate.format("myvalue1", "myvalue2") 
     ).append(
     alternateRowTemplate.format("myvalue3", "myvalue4") 
     ); 

A continuación, utilice la aplicación string.format según esta respuesta: Equivalent of String.format in jQuery

Answer 2

Aquí está un ejemplo simplificado:

$(function() { 
    var tbl = $('<table></table>').attr({ id: "bob" }); 
    var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(tbl); 
    $('<td></td>').text("text1").appendTo(row); 
    $('<td></td>').text("Test22").prepend($('<a></a>').attr({ href: "#" }).text("LINK")).appendTo(row);   
    tbl.appendTo($(".somePlaceInHtml"));   
    }); 

Envuelva la porción de fila en un bucle, reemplácela con variables y, al menos, es más fácil de mantener/leer en mi opinión, pero estoy acostumbrado a jQuery, por lo que su kilometraje puede variar, solo una opción.

Una nota al margen, ya que esto está usando .text() en todas partes, ayuda a prevenir los ataques de secuencias de comandos entre sitios dentro de su salida también.

Answer 3

Puede crear un StringBuilder, muy parecido al de C#. He aquí un fragmento tomó de Telerik Extensions for ASP.NET MVC:

$.stringBuilder = function() { 
    this.buffer = []; 
}; 

$.stringBuilder.prototype = { 

    cat: function(what) { 
     this.buffer.push(what); 
     return this; 
    }, 

    string: function() { 
     return this.buffer.join(''); 
    } 
}; 

De esta manera, puede tener el siguiente código:

var html = new $.stringBuilder(); 
for (var i in data) 
    html.cat("<tr><td>").cat(i).cat("</td><td></tr>"); 

$('#element').append(html.string()); 

La ventaja de este enfoque es que usted tendrá la concatenación rápida (matriz se une a un mejor desempeño bajo IE6), y podría extender el objeto con otra función útil (por ejemplo, catIf que toma una expresión booleana, o rep que repite una cadena dada varias veces).

Answer 4

O podría en lugar de concatenar cadenas juntas, haga uso de la función array.join.

for(var i=0;i<arr.length;i++) 
    { 
     arr[i] = "<tr>" + sth + "</tr>";  
    } 

node.innerHTML = arr.join(''); 

Answer 5

window.onload = function(){ 
    var btn = document.createElement("button"); 
    btn.setAttribute("id", "submit_bttn"); 
    btn.style.width = 125 + "px"; 
    btn.style.height = 50 + "px"; 
    btn.innerHTML = "Submit"; 
    document.body.appendChild(btn); 

    var x = document.getElementById("submit_bttn"); 
    x.onclick = function(){ 
     alert("hi"); 
    } 
}