mejor manera de crear nuevos elementos DOM

usando jQuery es mejor crear un elemento DOM como esto: -mejor manera de crear nuevos elementos DOM

function create(options) 
{ 
    $('<form action="' + options.action + '"></form>');  
}

O así:

function create(options) 
{ 
    $form = $('<form></form>'); 
    $form.attr('action',options.action); 
}

Esto puede ser una cuestión de opinión. Siento que la segunda forma da más claridad pero sospecho que es menos eficiente ...

Fuente

2012-02-23 rgvcorley

Esto se llama micro-optimización, también conocida como "la raíz de todos los males". – JJJ

@Juhana: Estás pensando en la optimización prematura. No sé por qué preguntar sobre los métodos de construcción de elementos DOM se consideraría prematura, o incluso mirco, optimización. De la pregunta ...* "Siento que la segunda forma da más claridad ..." * –

* "... pero sospecho que es menos eficiente." * Creo que es seguro decir que no está preguntando porque ha identificado este problema como el cuello de botella de rendimiento en su código. – JJJ

jQuery puede crear el objeto como siguiente código

$form = $('<form>', {action: 'my action'});

class es una palabra reservada en el IE y necesita ser citado . Vea la lista completa de palabras reservadas: Reserved Keywords in Javascript

Fuente

2012-02-23 14:42:26 komelgman

+1 Me pegó. Aunque siempre debe incluir la etiqueta de cierre ya que algunos navegadores (ahora desactualizados) no agregarán esto automáticamente: por ejemplo. '$ ('

', {acción: 'mi acción'});' –

no solo está desactualizado. Tuve un problema con IE8 sobre la etiqueta 'form' no cerrada, puedes hacerlo de esta manera' $ ('

Clasificaría IE8 como desactualizado personalmente: D –

A menos que esté ejecutando esta función muchas veces, cualquier diferencia de rendimiento será insignificante. Así que siempre iría con el más claro, más fácil de actualizar la solución (es decir, la segunda.)

Fuente

2012-02-23 14:42:17 lamplightdev

@NateBarbettini ¿Suena como una respuesta para mí? – Anders

Siempre hago el segundo.

function create(options) 
{ 
    $form = $('<form></form>'); 
    $form.attr('action',options.action); 
}

Prefiero este método simplemente porque lo encuentro más legible.

Fuente

2012-02-23 14:44:19

Check this para descubrir por ti mismo.

Creating DOM notes using jQuery nota más alta es mejor (OPS/Sec = operations per second = how many times per second the given code executes)

Y el ganador de la prueba en cualquier otro navegador que Opera:

var form = document.createElement("form"), 
    $form = $(form); 
form.action = options.action;

NOTA:

el método nativo ser aún más rápido si que no es necesario un jQuery objeto:

var form = document.createElement("form"); 
form.action = options.action;

Fuente

2012-02-23 14:45:12 andlrc

+1 si hay alguna preocupación sobre el rendimiento * y * la claridad, esto se ocuparía de ambos. –

+1 No sabía sobre jsperf.com - eso es muy bueno, ¡gracias por la presentación! – rgvcorley

+1 para jsPerf y sugiriendo no jQuery. La gente tiende a hacer todo con jQuery, deben saber cuándo es mejor o no. – Lennon

Nunca

heridas para optimizar ... hasta que lo haga ... se puede utilizar directamente hacia arriba JS:

function create(options) 
{ 
    var newform = document.createElement('form'); 

    newform.setAttribute('action',options.action); 
}

Aparte de eso, es insignificante como se mencionó anteriormente, lo que sea más fácil de leer para usted ... es decir opción 2

Fuente

2012-02-23 14:45:17

No estoy seguro sobre el verdadero código subrayado de jquery y no puedo decir cuál tiene un mejor rendimiento.

De todas formas, como puedo imaginar, en el primer caso jquery analizará los atributos de todos modos y les asignará valores, por lo que no debería haber una gran diferencia de rendimiento.

Así que creo que la primera solución es más conveniente si contiene un montón de código html, de lo contrario preferiría el segundo.

Fuente

2012-02-23 14:46:32 kingpin

mejor manera de crear nuevos elementos DOM

Respuesta

Cuestiones relacionadas