jquery - tablas - ¿Cómo crear un nodo DOM como un objeto?

obtener datos de una tabla html javascript

Question

Me gustaría crear un nodo DOM, establecer el atributo ''id'' y luego anexarlo a ''body''. Lo siguiente parece no 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 decirle a jQuery que trate esto como un objeto para que find () funcione en él?

Answer 1

Hay tres razones por las que tu ejemplo falla.

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

2. Una vez que la variable ''plantilla'' es un objeto jQuery, debe 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 personaje 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: ¿Cuáles son los valores válidos para el atributo id en HTML?

PD: Un último problema con el código de muestra es que un LI no se puede aplicar al CUERPO. De acuerdo con los requisitos de HTML, siempre debe estar dentro de una lista, es decir, UL u OL.

Answer 2

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 context jQuery bajo el cual aplicar el selector de CSS. Esto evita que se aplique la ID a otros elementos en el árbol DOM.

El problema parece ser que no estás usando 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és poniendo LI''s desnudas en tu árbol DOM para tu implementación "real", pero las UL son necesarias para que esto funcione. Suspiro.

Ejemplo: http://jsbin.com/iceqo

Por cierto, también podría interesarte microtemplating .

Answer 3

Primero crea tu plantilla en un objeto jQuery:

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

Luego configura los atributos y añádelos al DOM.

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

Tenga en cuenta que, sin embargo, no tiene sentido añadir un li directamente al DOM, ya que li siempre debe ser hijo 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

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 agregar un li directamente al cuerpo. 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 5

Y aquí está el único trazador de líneas:

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

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

Answer 6

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

¿Qué hay de esto?