Pregunta jQuery document.createElement equivalent?


Estoy refaccionando algunos viejos códigos JavaScript y hay mucha manipulación de DOM pasando.

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 forma mejor de hacerlo usando jQuery. He estado experimentando con:

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

Pero no estoy seguro de si esto es mejor.


1134
2017-11-06 12:26


origen


Respuestas:


aquí está tu ejemplo en "una" línea.

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

Actualizar: Pensé en actualizar esta publicación ya que todavía recibe bastante tráfico. En los comentarios a continuación hay un poco de discusión sobre $("<div>") vs $("<div></div>") vs $(document.createElement('div')) como una forma de crear nuevos elementos, y que es "lo mejor".

Yo junté un pequeño punto de referencia, y aquí están aproximadamente 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 no es una gran sorpresa, pero document.createElement es el método más rápido. Por supuesto, antes de salir y comenzar a refacturar toda su base de código, recuerde que las diferencias de las que estamos hablando aquí (en todas las versiones arcaicas de jQuery) equivalen aproximadamente a 3 milisegundos extra. por mil elementos.

Actualización 2

Actualizado para jQuery 1.7.2 y poner el punto de referencia en JSBen.ch, que es probablemente un poco más científico que mis puntos de referencia primitivos, ¡además de que puede ser colaborado ahora!

http://jsben.ch/#/ARUtz


1199
2017-11-06 12:34



Simplemente suministrando el HTML de los elementos que desea agregar a un constructor jQuery $() devolverá un objeto jQuery del código HTML recién creado, adecuado para adjuntarlo al DOM utilizando jQuery's append() método.

Por ejemplo:

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

A continuación, puede llenar esta tabla mediante programación, si lo desea.

Esto le da la posibilidad de especificar cualquier HTML arbitrario que desee, incluidos los nombres de clases u otros atributos, que puede encontrar más conciso que usar createElement y luego establecer atributos como cellSpacing y className vía JS.


123
2017-11-06 12:30



Crear nuevos elementos DOM es una característica central de jQuery() método, ver:


62
2017-07-15 07:14



ya que jQuery1.8, utilizando $.parseHTML() crear elementos es una mejor opción.

hay dos beneficios:

1.si usa la vieja usanza, que puede ser algo así como $(string), jQuery examinará la cadena para asegurarse de que desea seleccionar una etiqueta html o crear un elemento nuevo. Mediante el uso $.parseHTML(), le dice a jQuery que desea crear un nuevo elemento explícitamente, por lo que el rendimiento puede ser un poco mejor.

2. Mucho más importante es que puede sufrir un ataque cruzado (más información) si usa la vieja usanza si tienes algo como:

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

un chico malo puede ingresar <script src="xss-attach.js"></script> para molestarte. por suerte, $.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 mientras 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>​]

39
2018-01-24 03:01



Estoy haciendo eso

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

35
2017-11-24 18:07



Me siento usando document.createElement('div') Juntos con jQuery es más rápido:

$( document.createElement('div') ,{
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

34
2018-06-18 05:53



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

Desde jQuery 1.8 hay un jQuery.parseHTML () función que ahora es una 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 lanzamiento:

Análisis HTML relajado: puede volver a tener espacios principales o   nuevos antes de las etiquetas en $ (htmlString). Todavía aconsejamos fuertemente que   usa $ .parseHTML () al analizar el HTML obtenido desde el exterior   fuentes, y puede estar haciendo más cambios al análisis de HTML en el   futuro.

Para relacionarse con la pregunta real, el ejemplo proporcionado podría traducirse a:

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

que desafortunadamente es menos conveniente que usar solo $(), pero te da más control, por ejemplo, puedes elegir excluir etiquetas de guiones (dejará scripts en línea como onclick aunque):

> $.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í hay un punto de referencia de la respuesta superior ajustada a la nueva realidad:

JSbin Link

jQuery 1.9.1

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

Parece que parseHTML está mucho más cerca de createElement que $(), pero todo el impulso desaparece después de envolver los resultados en un nuevo objeto jQuery


25
2017-09-29 19:01



var mydiv = $('<div />') // also works

11
2017-11-17 17:03



var div = $('<div/>');
div.append('Hello World!');

Es la forma más rápida / más fácil de crear un elemento DIV en jQuery.


7
2017-12-22 22:43



¡Todo es bastante directo! Heres un par de 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 );

5
2018-05-25 17:17