Tworzenie zakresu dynamicznego

Question

Jak mogę utworzyć tagi dynamiczne?

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

To stworzy <img src="/images/flower.png" id="image-1" />

Chcę utworzyć <span> tag wokół <img> tagu.

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

Answer 1

Można użyć wrap():

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

Answer 2

Można użyć wrap() zawinąć jednego elementu wewnątrz drugiego. Na przykład:

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

Answer 3

Operacje DOM są oh-drogie; po prostu przygotuj znaczniki, których szukasz, i , a następnie dodaj je w razie potrzeby!

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

Oto a jsperf test case co skutkuje ~ 5K ops/s na pierwszym przypadku i ~ 14K dla drugiego (na moim całkiem przyzwoity pudełku).

Nie jest to również przedwczesna optymalizacja. Jeśli masz na przykład wypełniony ajaxem stół 7x10 i każdą komórkę tworzysz osobno ... i zawijasz je do elementów <tr> ... a następnie dodajesz do tabeli, nakłada się suma. Działaj na łańcuchu, a twój skrypt będzie co najmniej 80 razy szybszy!

Innym aspektem, o którym należy pamiętać, jest to, że jsperf wyraźnie mierzy wydajność javascript. Jeśli manipulujesz tabelą, jej treść będzie jeszcze bardziej agresywna re-painted/re-flown.