evento - Construyendo HTML(~=DOM) usando jQuery

evento on jquery

Question

Puede que esté haciendo algo mal, pero no he podido encontrar una buena manera de construir estructuras básicas de HTML / DOM, como listas, dinámicamente. Un ejemplo simple sería construir una tabla (elemento de tabla, fila, celdas, con contenido de texto correctamente escapado) dada la entrada como json (objetos).

El problema que tengo es que la mayoría de las llamadas (como ".append ()", ".html ()", ".text ()") no parecen encadenarse de manera intuitiva (para mí, de todos modos). Por ejemplo, no puedes hacer algo como:

$("#divId").append("<table>").append("<tr>").append("<td>").text("some text");

La llamada text () parece eliminar el contenido en el nivel principal; y anexa igualmente agregar cosas dentro del mismo ámbito. Espero que appennd () devuelva el contenido que se agrega, pero parece que está devolviendo su propio contexto.

Sé que hay una extensión simple "appendText ()" que ayuda con la última parte. Pero ¿qué hay de los demás?

Para lo que vale, ahora vuelvo a DOM, por algo así como

$("#divId")[0].appendChild(document.createElement("table"))....

pero eso es bastante detallado.

Así que espero que me esté perdiendo algo totalmente obvio ... ¿pero qué? ¿Llamar a otro que anexar ()?

Intenté buscar en los documentos de referencia de jQuery, buscar en Google, pero la mayoría de los documentos solo usan "incrustar todas las cosas en una cadena"; que tiene problemas, incluido el de no citar correctamente el contenido textual.

(también: no, esto no es un dup de "JQuery: crear HTML en ''memoria'' en lugar de DOM"

Answer 1

Nota rápida: además, el complemento AppendDOM parece que también puede simplificar la tarea.

Answer 2

Puedes hacerlo:

$("#divId").append("<table>").append("<tr>").append("<b>").text("some text");

Cómo sea:

$("#divId").append("<table><tr><td><b>some test</b></td></tr></table>");

o

$("<b></b>").text("some text").appendTo("<td></td>").appendTo("<tr></tr>").appendTo("<table></table>").appendTo("#divId");

Answer 3

Puedes usar append :

$("#divId").append(
  $("<table/>").append(
    $("<tr/>").append(
      $("<td/>").append(
        $("<b/>").text("some text")
))));

Si realmente insistes, puedes usar appendTo , pero es menos intuitivo, será más lento y tomará unas cuantas pulsaciones más:

$("<b/>").text("some text").appendTo(
  $("<td/>").appendTo(
    $("<tr/>").appendTo(
      $("<table/>").appendTo(
        "#divId"
))));

En cualquier caso, es importante usar .text("...") para escapar de caracteres especiales (y evitar los ataques XSS).

Aún mejor , cuando te aburres de escribir esto, realmente quieres ver jsrender , mustache , handlebars , doT o cualquier otra de las muchas soluciones de plantillas de javascript. Le permite mantener su código separado de su HTML (piense en MVC) y deja mucho más claro lo que está creando. Es mucho más fácil de modificar también.

Answer 4

También puede usar el complemento jQuery createHtml que le permite hacer:

$("#divId").$table().$tr().$td().$b("some text");

Es un poco más conveniente que la cadena .append () en la que puede poner contenido y atributos html en los elementos a medida que los coloque:

$("#divId").$table({class: "clean"}).$tr().$td({id: "textId"}).$b("some text");