javascript document.createElement o tag HTML

Sono confuso nel seguire lo stile di scrittura del codice. Voglio sapere qual è il metodo pratico ed efficiente per inserire tag HTML nel documento.

Javascript:

document.getElementById('demoId').innerHTML='
hello world and click me also
';

O

 var itd=document.createElement('div'), ita=document.createElement('a'), idt=document.createTextNode('hello world'); iat=document.createTextNode('click me'); idn=document.createTextNode('also'); ita.appendChild(iat); itd.appendChild(idt); itd.appendChild(ita); itd.appendChild(idn) docuemtn.getElementById('demoId').appendChild(itd); 

Qual è il metodo più veloce e migliore?

Beh, pensa a quello che stanno facendo ognuno di loro. Il primo sta prendendo la stringa, analizzandola e quindi chiamando document.createElement , document.appendChild , ecc. (O metodi simili) in base all’output dalla stringa analizzata. Il secondo è la riduzione del carico di lavoro sul browser poiché stai dichiarando direttamente cosa vuoi che faccia.

Vedi un confronto su jsPerf

Secondo jsPerf l’ opzione 1 è circa 3 volte più lenta dell’opzione 2 .

Sul tema della manutenibilità, l’opzione 1 è molto più facile da scrivere ma mi chiama vecchio stile, preferirei usare l’opzione 2 in quanto mi sembra molto più sicura.

modificare

Dopo che alcuni risultati hanno iniziato ad arrivare, i diversi risultati hanno suscitato la mia curiosità. Ho eseguito il test due volte con ciascuno dei miei browser installati, Ecco uno screenshot dei risultati di jsPerf dopo tutti i test (operazioni al secondo, più alto è meglio).

risultati jsPerf

Quindi i browser sembrano differire molto nel modo in cui gestiscono le due tecniche. In media, l’opzione 2 sembra essere la più veloce a causa dell’ampia opzione di vantaggio di Chrome e Safari 2. La mia conclusione è che dovremmo semplicemente usare quello che sembra più comodo o più adatto agli standard della tua organizzazione e non preoccuparti di quale sia più efficiente.

La cosa principale che questo esercizio mi ha insegnato è di non usare IE10 nonostante le grandi cose che ho sentito a riguardo.