Question

Me gustaría crear un nodo DOM, establecer el atributo 'id' y luego anexarlo a 'body'. Lo que sigue no parece funcionar porque jQuery no ve mi plantilla como un objeto:

var template = "<li><div class='bar'>bla</div></li>"; 
template.find('li').attr('id','1234'); 
$(body).append(template); 

¿Cómo puedo saber jQuery para tratar esto como un objeto para encontrar() trabaja en él?

Answer 1

Lo pondría en el DOM primero. No estoy seguro de por qué mi primer ejemplo falló. Eso es realmente extraño.

var e = $("<ul><li><div class='bar'>bla</div></li></ul>"); 
$('li', e).attr('id','a1234'); // set the attribute 
$('body').append(e); // put it into the DOM  

Poniendo e (los elementos de devoluciones) da jQuery context bajo las cuales aplicar el selector CSS. Esto evita que se aplique la ID a otros elementos en el árbol DOM.

El problema parece ser que no está utilizando el UL. Si coloca una li desnuda en el árbol DOM, tendrá problemas. Pensé que podría manejar/solucionar esto, pero no puede.

Puede que no esté poniendo LI desnudas en su árbol DOM para su implementación "real", pero las UL son necesarias para que esto funcione. Suspiro.

Ejemplo: http://jsbin.com/iceqo

Por cierto, también puede estar interesado en microtemplating.

Answer 2

Prueba esto:

var div = $('<div></div>').addClass('bar').text('bla'); 
var li = $('<li></li>').attr('id', '1234'); 
li.append(div); 

$('body').append(li); 

Obviamente, no tiene sentido para añadir un li al cuerpo directamente. Básicamente, el truco consiste en construir el árbol elementr DOM con $ ('su html aquí'). Sugiero usar modificadores CSS (.text(), .addClass() etc) en lugar de hacer jquery parse HTML sin procesar, hará que sea mucho más fácil cambiar las cosas más tarde.

Answer 3

En primer lugar hacer su plantilla en un objeto jQuery:

var template = $("<li><div class='bar'>bla</div></li>"); 

A continuación, establecer los atributos y añadirlo a la DOM.

template.find('li').attr('id','1234'); 
$(document.body).append(template); 

Nota que sin embargo no tiene ningún sentido en absoluto añadir un li directamente a la DOM desde li siempre debe ser hijos de ul o ol. También es mejor no hacer que jQuery analice HTML sin formato. En su lugar crea un li, establece sus atributos. Crea un div y establece sus atributos. Inserta el div en el li y luego agrega el li al DOM.

Answer 4

Y aquí es el chiste:

$("<li><div class='bar'>bla</div></li>").find("li").attr("id","1234").end().appendTo("body") 

Pero me pregunto por qué le gustaría añadir el atributo "id" en una etapa posterior en lugar de inyectarlo directamente en la plantilla.

Answer 5

var template = $("<li>", { id: "1234", html: 
    $("<div>", { class: "bar", text: "bla" }) 
}); 
$('body').append(template); 

¿Qué tal esto?

Answer 6

Existen tres motivos por los que su ejemplo falla.

1. La variable 'plantilla' original no es un/objeto DOM jQuery y no se puede analizar, es una cadena.Lo convierten en un objeto jQuery envolviéndolo en $(), tales como: template = $ (plantilla)

2. Una vez que la variable de 'plantilla' es un objeto jQuery tiene que darse cuenta de que <li> es el objeto raíz. Por lo tanto, no puede buscar el nodo raíz LI y obtener ningún resultado. Simplemente aplique la ID al objeto jQuery.

3. Cuando asigna una ID a un elemento HTML, no puede comenzar con un carácter numérico con ninguna versión HTML antes de HTML5. Debe comenzar con un carácter alfabético. Con HTML5, este puede ser cualquier personaje que no sea de espacio en blanco. Para más detalles consulte: What are valid values for the id attribute in HTML?

PS: Una última cuestión con el código de ejemplo es un LI no se puede aplicar al cuerpo. De acuerdo con los requisitos de HTML, siempre debe estar contenido dentro de una lista, es decir, UL u OL.