¿Es incorrecto usar jquery para generar etiquetas html?

Question

Solo me pregunto si es una mala práctica enviar etiquetas html con javascript. Por ejemplo, supongamos que tengo una tabla y en la página cargar una solicitud de ajax obtiene los datos para completarla. Para cada fila de datos que voy a necesitar otra fila de salida, algo como esto:

$('#results').html('<tr><td>'+data.people[i]['name']+'</td><td>'+data.people[i]['age']+'</td><td>'+data.people[i]['gender']+'</td></tr>'); 

¿Es malo hacer esto?

Answer 1

no está mal. Hay dos cosas que podría hacer para mejorarlo:

Supongo que tiene esto en cada bucle, por lo que podría construir su tabla completa antes de configurarlo con HTML. Entonces haces la operación .html() solo una vez.

var yourTableHTML = "" 

$.each(yourContentArray, function(data,i){ 
    youtTableHTML += '<tr><td>'+data.people[i]['name']+'</td><td>'+data.people[i]['age']+'</td><td>'+data.people[i]['gender']+'</td></tr>' 
}) 

$('#results').html(yourTableHTML); 

La segunda cosa es, que se puede utilizar un modelo de HTML dentro de ti archivo HTML (una fila modelo) que se clona. Entonces, si alguien más tiene que cambiar el código HTML una vez, no necesita cambiar el javascript a.

Answer 2

No, esto es una práctica normal. Así es como normalmente agregarías html dinámicamente sobre la marcha.

Answer 3

Esta es la tendencia reciente de utilizar el sitio web para trabajar como servidor web y proporcionar datos y, a continuación, scripts de cliente para crear la interfaz de usuario.

Definitivamente no está mal y limitará la cantidad de datos que se pasan y proporciona mejor servidor/cliente, separación de negocios/UI.

La advertencia es que depender mucho del cliente ejercerá presión sobre el navegador. Si el cliente es un teléfono inteligente, podría tener problemas con demasiado JavaScript.

Answer 4

Está bien solo si este archivo JS está en un archivo externo.

De lo contrario, IE puede volverse loco y su HTML no se validará si está en XHTML y es estricto.

Answer 5

No lo recomendaría ya que se está salteando la funcionalidad incorporada para escapar de la entrada. No estoy seguro de si se trata de una vulnerabilidad de seguridad, pero nunca es una buena práctica inyectar cosas aleatorias en cadenas que esperan cierto formato. Pruebe el método jQuery.text() en su lugar.

Answer 6

Es normal, como sugiere sushil bharwani. Sin embargo:

1. Asegúrese de usar etiquetas de cierre.
2. Asegúrese de que los datos no contengan ninguna etiqueta.
3. Limite el tamaño de la cadena; el navegador podría bloquearse si es demasiado largo.

Answer 7

Creo que la respuesta más completa es: está bien agregar etiquetas html en jQuery, javascript y similares siempre que no haya una manera diferente de realizar la tarea que desea realizar. Para aclarar: no está bien construir una página estática completa con jQuery cuando podrías construirla normalmente con html, está bien agregar contenido dinámico a una página web con jQuery, esa es una de las principales razones por las que está ahí.

Answer 8

En lugar de decir cuál es la mejor práctica sólo te voy a dar los pros y los contras de la inserción directa de HTML:

Pros:

• rápido. Esto es mucho más rápido que crear elementos individuales usando jQuery y anexándolos de a uno por vez.

• Básico. Ya que es sólo una cadena, puede realizar truquitos como esto:

  var lis = ['One', 'Two', 'Three']; 
  var html = '<li>' + lis.join('</li><li>') + '</li>'; 
  

  Muchas otras operaciones son igualmente tan flexible cuando se trabaja directamente con cuerdas.

Contras:

• propenso a errores. Es fácil cometer un error no solo en la cadena, sino también en los datos. Si sus datos tienen caracteres HTML no guardados, su cadena podría estar rota.
• Más difícil de leer (discutible). Muchas variables interpoladas entre las cadenas podrían dificultar la lectura. Otros pueden argumentar que muchos .append() sy .addClass() y .attr() lo hacen aún más difícil.

---

Para efectos de comparación, su ejemplo sin utilizar .html():

var tr = $('<tr>'); 
$('<td>').text(data.people[i]['name']).appendTo(tr); 
$('<td>').text(data.people[i]['age']).appendTo(tr); 
tr.appendTo('#results'); 

Answer 9

Bueno, no. Es una práctica bastante aceptable siempre y cuando la mantenga en pequeñas dosis. Hacer demasiado puede agregar una latencia notable en la página web. Me gustaría mantener lo más estructural, aunque eso es sólo una preferencia personal:

var tr = $('<tr></tr>'); 

var td = $('<td></td>'); 
td.text(data.people[i]['name']); 
tr.append(td); 

td = $('<td></td>'); 
td.text(data.people[i]['age']); 
tr.append(td); 

$('#results').html(tr); 

Hacerlo de esta manera se asegura de que es más fácil de leer (al menos en mi opinión) y por lo tanto mucho más fácil de arreglar/añadir a más tarde.