Creazione di span dinamico

Question

Come posso creare tag dinamici?

$("<img />").attr({ 
    id: "image-1", 
    src: "/images/flower.png", 
}).appendTo("#" + imgContainer); 

Si creerà <img src="/images/flower.png" id="image-1" />

voglio creare <span> tag intorno <img> tag.

cioè <span><img src="/images/flower.png" id="image-1" /></span>

Answer 1

È possibile utilizzare wrap():

$("<img />").attr({ 
    id: "image-1", 
    src: "/images/flower.png" 
}).appendTo("#" + imgContainer).wrap("<span />") 

Answer 2

È possibile utilizzare wrap() per avvolgere un elemento all'interno di un altro. Ad esempio:

$("<img />").attr({ 
    id: "image-1", 
    src: "/images/flower.png", 
}) 
.appendTo("#" + imgContainer) 
.wrap("<span />"); 

Answer 3

Le operazioni DOM sono davvero costose; prepara semplicemente il markup che stai cercando e poi aggiungilo come necessario!

//Before: 
$("<img />")     //#1, create an element outside of the tree 
.attr({      //#2? change its attributes 
    id: "image-1", 
    src: "/images/flower.png" 
}) 
.appendTo("#" + imgContainer) //#3, add the element to DOM 
.wrap("<span />");    //#4, create and add another element to DOM 

//After: 
$('<span><img src="/images/flower.png" id="image-1"></span>') //#1 
.appendTo("#" + imgContainer);         //#2 

Ecco a jsperf test case che si traduce in ~ 5K OPS/sec per il primo caso e ~ 14K per la seconda (sulla mia casella di abbastanza decente).

Questo non è l'ottimizzazione prematura, neanche. Se si dispone, ad esempio, di una tabella 7x10 popolata con jax e si creano ogni cella singolarmente ... e le si sovrappongono negli elementi <tr> ... e quindi la si aggiunge a una tabella, l'overhead viene sommato. Operare su una stringa e il tuo script sarà almeno 80 volte più veloce!

Un altro aspetto da ricordare è che jsperf misura solo le prestazioni javascript. Se stai manipolando un tavolo, il suo contenuto sarà ancora più aggressivo re-painted/re-flown.