javascript - insertbefore - jquery append after

jQuery document.createElement equivalente?

Question

Estoy refactorizando un código JavaScript antiguo y hay mucha manipulación de DOM en marcha.

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 hacerlo utilizando jQuery. He estado experimentando con:

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

Pero no estoy seguro de si esto es mejor.

Answer 1

¡Todo es bastante sencillo! 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 );

Answer 2

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

Sigue tu sintaxis:

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

El ID del nodo DOM se puede especificar como segundo parámetro:

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

¿Es serio? No. Pero esta sintaxis es mejor que $ ("<div> </div>") , y es un valor muy bueno para ese 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 simple, creo que es mejor agregar atributos y contenido mediante métodos de encadenamiento:

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

Además, es un buen ejemplo para un simple jQuery-plugin (el número 100).

Answer 3

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

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

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

Reuní un pequeño punto de referencia , y aquí hay 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 comenzar a refactorizar todo el código base, recuerde que las diferencias de las que estamos hablando aquí (en todas las versiones arcaicas de jQuery) equivalen a unos 3 milisegundos adicionales por mil elementos .

Actualización 2

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

jsben.ch/#/ARUtz

Answer 4

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

Desde jQuery 1.8 hay una función jQuery.parseHTML 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 publicación :

Análisis HTML relajado: una vez más puede tener espacios iniciales o nuevas líneas antes de las etiquetas en $ (htmlString). Aún le recomendamos encarecidamente que use $ .parseHTML () cuando analice el HTML obtenido de fuentes externas, y puede que esté realizando cambios adicionales en el análisis de HTML en el futuro.

Para relacionarse con la pregunta actual, siempre que el ejemplo pueda ser traducido a:

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

lo que desafortunadamente es menos conveniente que usar solo $() , pero le da más control, por ejemplo, puede elegir excluir etiquetas de secuencia de comandos (dejará secuencias de comandos en línea como 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í hay un punto de referencia de la respuesta superior ajustado 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

Answer 5

Crear nuevos elementos DOM es una característica principal del método jQuery() , consulte:

• http://api.jquery.com/jQuery/#creating-new-elements
• y en particular http://api.jquery.com/jQuery/#example-1-1

Answer 6

Estoy haciendo así:

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

Answer 7

Parece que la creación de elementos solo te llevará hasta ahora. Una vez que comienza el encadenamiento, la diferencia de rendimiento es despreciable.

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

¿Me estoy perdiendo de algo?

Answer 8

Simplemente suministrando el HTML de los elementos que desea agregar a un constructor jQuery $() devolverá un objeto jQuery a partir del HTML creado recientemente, adecuado para ser agregado al DOM usando el método append() jQuery.

Por ejemplo:

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

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

Esto le da la capacidad de especificar cualquier HTML arbitrario que le guste, incluidos los nombres de clase u otros atributos, que puede encontrar más conciso que usar createElement y luego configurar atributos como cellSpacing y className través de JS.

Answer 9

desde jQuery1.8 , usar jQuery.parseHTML para crear elementos es una mejor opción.

hay dos beneficios:

1. Si usa la forma antigua, que puede ser algo como $(string) , jQuery examinará la cadena para asegurarse de que desea seleccionar una etiqueta html o crear un nuevo elemento. Al usar $.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 del sitio ( más información ) si usa el método antiguo. 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. 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 mientras que 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>​]

Answer 10

jQuery fuera de la caja no tiene el equivalente a un elemento de creación. De hecho, la mayoría del trabajo de jQuery se realiza internamente utilizando innerHTML sobre la manipulación de DOM pura. Como Adam mencionó anteriormente, así es como puedes lograr resultados similares.

También hay complementos disponibles que hacen uso del DOM sobre innerHTML como appendDOM , DOMEC y FlyDOM solo por nombrar algunos. En cuanto al rendimiento, el jQuery nativo sigue siendo el más eficaz (principalmente porque utiliza innerHTML)

Answer 11

ACTUALIZAR

A partir de las últimas versiones de jQuery, el siguiente método no asigna propiedades pasadas en el segundo Objeto

Respuesta anterior

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

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

Answer 12

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

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

Answer 13

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