jQuery creare dinamicamente tavolo/tr/td o etc e accoda attributi

Question

In un esempio che sto avendo tale struttura (piccolo esempio):

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

In jQuery vorrei creare in modo dinamico come:

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

ed ecc ecc ... (un sacco di altre cose da scrivere). Dopo Vorrei solo aggiungerlo:

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

Quindi c'è qualche altro modo per scrivere una tale struttura in modo dinamico con jQuery? Questo è un problema per me perché ho una struttura grande, non piccola come ho mostrato nell'esempio. Il motivo principale è che voglio ottenere una migliore leggibilità per me stesso e altri sviluppatori che manterranno questo codice.

Answer 1

si può fare un "template" fuori della stringa? Se sì, allora memorizzarlo in una variabile "costante" (ad esempio definito di portata globale), che contiene i segnaposto per le variabili reali, come {0}, {1} ecc, come si usa in string.format() metodo C# 's.

Quindi, si avrebbe codice come questo:

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") 
     ); 

Si potrebbe quindi utilizzare l'implementazione String.Format come da questa risposta: Equivalent of String.format in jQuery

Answer 2

Ecco un esempio semplificato:

$(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"));   
    }); 

Avvolgere la porzione di riga in un ciclo, sostituirla con variabili ed è almeno più semplice da mantenere/leggere secondo me, ma sono abituato a jQuery, quindi il tuo chilometraggio può variare, solo un opzione.

Una nota a margine, poiché utilizza .text() ovunque, aiuta a prevenire gli attacchi di cross-site scripting all'interno dell'output.

Answer 3

Si potrebbe creare uno StringBuilder, molto simile a quella in C#. Ecco un frammento preso dal 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(''); 
    } 
}; 

In questo modo, è possibile avere il seguente codice:

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

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

Il vantaggio di questo approccio è che avrete la concatenazione veloce (array unisce prestazioni migliori sotto IE6), e si potrebbe estendere l'oggetto con un'altra funzione utile (ad esempio, catIf che prende un'espressione booleana, oppure rep che ripete più volte una determinata stringa).

Answer 4

Oppure è possibile invece concatenare stringhe insieme, quindi utilizzare la funzione 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"); 
    } 
}