Mar 292013
 

Possiamo sicuramente usare jQuery per generare del codice html.

Una strada magari meno frequentata potrebbe essere quella presentata in questo tutorial. Iniziamo con il predisporre una classe css e due elementi html, un paragrafo segnaposto e un div contenitore:


<style>
.test {background-color:#FF9900;}
</style>
...
<p>Segnaposto</p>
<div id="contenitore"></div>

Nel nostro solito document.ready prepariamo invece una funzione che restituisce tre elementi di una lista:


var htmlGen = function() {
return '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';
}

Ora si tratta di chiamare questa funzione posizionandola dopo il <p>, assegnando la classe test e iniettando nel tag html <ul> che genereremo al volo l’outpute della funzione precedente


$('<p/>', {
class: 'test',
html: $('<ul/>', {html: htmlGen})
}).appendTo('#contenitore');

Con questo risultato