Jquery document.createElement equivalente?

Refactorizo ​​el viejo código javascript, y hay muchas manipulaciones de DOM.

 var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t); 

Me gustaría saber si hay una mejor manera de hacer esto con jQuery. Experimenté con:

 var odv = $.create("div"); $.append(odv); // And many more 

Pero no estoy seguro de qué es lo mejor.

1066
06 нояб. fijado por Rob Stevenson-Leggett 06 nov. 2008-11-06 15:26 '08 a las 15:26 2008-11-06 15:26
@ 13 respuestas

Aquí está su ejemplo en la línea "uno".

 this.$OuterDiv = $('<div></div>') .hide() .append($('<table></table>') .attr({ cellSpacing : 0 }) .addClass("text") ) ; 

Actualización: pensé que estaba actualizando esta publicación, ya que todavía recibe bastante tráfico. Los siguientes comentarios tratan el tema de $("<div>") vs $("<div></div>") vs $(document.createElement('div')) como una forma de crear nuevos elementos y cuál es la "mejor ".

Recolecté una pequeña prueba , y aquí están los resultados de repetir las opciones anteriores 100,000 veces:

jQuery 1.4, 1.5, 1.6

  Chrome 11 Firefox 4 IE9 <div> 440ms 640ms 460ms <div></div> 420ms 650ms 480ms createElement 100ms 180ms 300ms 

jQuery 1.3

  Chrome 11 <div> 770ms <div></div> 3800ms createElement 100ms 

jQuery 1.2

  Chrome 11 <div> 3500ms <div></div> 3500ms createElement 100ms 

Creo que esto no es una gran sorpresa, pero document.createElement es el método más rápido. Por supuesto, antes de que se vaya y comience a refactorizar todo su código base, recuerde que las diferencias de las que estamos hablando aquí (en todas las versiones de jQuery, excepto en las arcaicas), son aproximadamente 3 milisegundos por mil elementos.

Actualización 2

Actualizado para jQuery 1.7.2 y haga una prueba en JSBen.ch, que probablemente sea un poco más aprendido que mis pruebas primitivas, ¡y ahora puede usar el crowdsourcing!

http://jsben.ch/#/ARUtz

1149
06 нояб. la respuesta se da nickf 06 nov. 2008-11-06 15:34 '08 a las 15:34 2008-11-06 15:34

Simplemente presentando los elementos HTML que desea agregar al constructor jQuery $() se devolverá un objeto jQuery del HTML recién creado adecuado para agregarlo al DOM usando el método jQuery append() .

Por ejemplo:

 var t = $("<table cellspacing='0' class='text'></table>"); $.append(t); 
border=0

Después de eso puede llenar esta tabla programáticamente si lo desea.

Esto le brinda la capacidad de especificar cualquier HTML arbitrario que desee, incluidos los nombres de clase u otros atributos que pueden ser más concisos que usar createElement , y luego establecer atributos como cellSpacing y className través de JS.

116
06 нояб. La respuesta la da Adam Bellaire 06 nov. 2008-11-06 15:30 '08 a las 15:30 2008-11-06 15:30

La creación de nuevos elementos DOM es la característica principal del método jQuery() , consulte:

Saludos

57
15 июля '10 в 10:14 2010-07-15 10:14 la respuesta la da abernier 15 de julio de 2010 a las 10:14 2010-07-15 10:14

desde jQuery1.8 , usar $.parseHTML() para crear elementos es la mejor opción.

Hay dos ventajas:

1. Si usa el método antiguo, que puede ser algo como $(string) , jQuery comprueba la cadena para asegurarse de que desea seleccionar la etiqueta html o crear un nuevo elemento. Con $.parseHTML() , le dices a jQuery que deseas crear explícitamente un nuevo elemento, por lo que el rendimiento podría ser un poco mejor.

2. Más importante aún, puede encontrar un ataque a través del sitio ( más ) si usa el método anterior. si tienes algo como:

  var userInput = window.prompt("please enter selector"); $(userInput).hide(); 

Un chico malo puede escribir <script src="xss-attach.js"></script> para molestarte. Afortunadamente, $.parseHTML() evita esta vergüenza para ti:

 var a = $('<div>') // a is [<div>​</div>​] var b = $.parseHTML('<div>') // b is [<div>​</div>​] $('<script src="xss-attach.js"></script>') // jQuery returns [<script src=​"xss-attach.js">​</script>​] $.parseHTML('<script src="xss-attach.js"></script>') // jQuery returns [] 

Sin embargo, tenga en cuenta que a es un objeto jQuery, y b es un elemento html:

 a.html('123') // [<div>​123​</div>​] b.html('123') // TypeError: Object [object HTMLDivElement] has no method 'html' $(b).html('123') // [<div>​123​</div>​] 
36
24 янв. Brian da la respuesta. 2013-01-24 06:01 '13 a las 6:01 am 2013-01-24 06:01

Siento que usar document.createElement('div') con jQuery es más rápido:

 $( document.createElement('div') ,{ text: 'Div text', 'class': 'className' }).appendTo('#parentDiv'); 
30
18 июня '13 в 8:53 2013-06-18 08:53 la respuesta la da Om Shankar el 18 de junio de '13 a las 8:53 2013-06-18 08:53

Hago esto

 $('<div/>',{ text: 'Div text', class: 'className' }).appendTo('#parentDiv'); 
28
24 нояб. La respuesta es dada por kami el 24 de noviembre. 2012-11-24 21:07 '12 a las 21:07 2012-11-24 21:07

Aunque esta es una pregunta muy antigua, pensé que sería bueno actualizarla con la información más reciente;

Desde jQuery 1.8 hay una función jQuery.parseHTML () , que ahora es la forma preferida de crear elementos. Además, hay algunos problemas con el análisis de HTML a través de $('(html code goes here)') , por ejemplo, el sitio web oficial de jQuery menciona lo siguiente en una de sus notas de la versión :

Análisis HTML relajado: puede volver a tener espacios iniciales o nuevas líneas antes de las etiquetas en $ (htmlString). Todavía le recomendamos encarecidamente que utilice $ .parseHTML () al analizar HTML de fuentes externas y puede realizar cambios adicionales en el análisis de HTML en el futuro.

Para ser relevante a la pregunta real, el ejemplo dado se puede traducir a:

 this.$OuterDiv = $($.parseHTML('<div></div>')) .hide() .append($($.parseHTML('<table></table>')) .attr({ cellSpacing : 0 }) .addClass("text") ) ; 

que, desafortunadamente, es menos conveniente que solo $() , pero le da más control, por ejemplo, puede excluir etiquetas de secuencia de comandos (dejará secuencias de comandos incrustadas, por ejemplo onclick ):

 > $.parseHTML('<div onclick="a"></div><script></script>') [<div onclick=​"a">​</div>​] > $.parseHTML('<div onclick="a"></div><script></script>', document, true) [<div onclick=​"a">​</div>​, <script>​</script>​] 

Además, aquí el punto de referencia de la respuesta superior está sintonizado a una nueva realidad:

Enlace de Jsbin

jQuery 1.9.1

   $ .parseHTML: 88ms   $ ($. parseHTML): 240ms   <div> </ div>: 138ms   <div>: 143ms   crearElemento: 64ms

Parece que parseHTML mucho más cerca de createElement que $() , pero todas las aceleraciones desaparecieron después de transferir los resultados a un nuevo objeto jQuery

23
29 сент. respuesta dada adamziel 29 sep . 2013-09-29 22:01 '13 a las 10:01 pm 2013-09-29 22:01
 var mydiv = $('<div />') // also works 
11
17 нояб. La respuesta es dada por Shimon Doodkin el 17 de noviembre. 2010-11-17 20:03 '10 a las 20:03 2010-11-17 20:03
 var div = $('<div/>'); div.append('Hello World!'); 

Esta es la forma más corta / fácil de crear un elemento DIV en jQuery.

6
23 дек. La respuesta se da AcidicChip 23 Dic. 2010-12-23 01:43 '10 a la 1:43 2010-12-23 01:43

Acabo de hacer un pequeño complemento de jQuery para esto: https://github.com/ern0/jquery.create

Esto sigue su sintaxis:

 var myDiv = $.create("div"); 

El identificador de nodo DOM se puede especificar como el segundo parámetro:

 var secondItem = $.create("div","item2"); 

¿Esto es serio? No Pero esta sintaxis es mejor que $ ("<div> </ div>"), y este es un muy buen valor para este dinero.

Soy un nuevo usuario de jQuery, cambiando de DOMAssistant, que tiene una función similar: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

Mi complemento es más sencillo, creo que los métodos y el contenido deben agregarse mediante métodos de encadenamiento:

 $("#container").append( $.create("div").addClass("box").html("Hello, world!") ); 

Además, es un buen ejemplo para un complemento simple de jQuery (número 100).

4
15 авг. La respuesta se da ern0 15 ago. 2013-08-15 17:49 '13 a las 17:49 2013-08-15 17:49

¡Todo es bastante sencillo! Aquí hay algunos ejemplos rápidos ...


 var $example = $( XMLDocRoot ); 

 var $element = $( $example[0].createElement('tag') ); // Note the [0], which is the root $element.attr({ id: '1', hello: 'world' }); 

 var $example.find('parent > child').append( $element ); 
4
25 мая '10 в 20:17 2010-05-25 20:17 La respuesta la da Randy el 25 de mayo de 2010 a las 20:17 2010-05-25 20:17

Parece que la creación del elemento te llegará. Una vez que empiezas la cadena, la diferencia de rendimiento es pequeña.

http://jsperf.com/jquery-dom-node-creation

¿Me perdí algo?

1
28 февр. LukeAskew respondió el 28 de febrero. 2013-02-28 02:59 '13 a las 2:59 2013-02-28 02:59

El jQuery fuera de la caja no tiene el equivalente de un elemento createElement. De hecho, la mayoría de los trabajos de jQuery se realizan internamente usando innerHTML sobre la manipulación de DOM pura. Como mencionó Adam, puedes lograr resultados similares.

También hay complementos disponibles que usan DOM encima de innerHTML, por ejemplo, appendDOM , DOMEC y FlyDOM , por nombrar algunos. En cuanto al rendimiento, el jQuery incrustado sigue siendo el más eficiente (principalmente porque utiliza innerHTML)

0
06 нояб. respuesta dada por James Hughes 06 de noviembre 2008-11-06 15:35 '08 a las 15:35 2008-11-06 15:35

Otras preguntas acerca de las etiquetas o Haz una pregunta