JQuery: Insertar grandes cantidades de HTML a través de la manipulación DOM - ¿Mantenimiento?

Question

He encontrado buenas publicaciones en buenas prácticas que insertan elementos DOM usando jQuery como este, este y este

Está bien cuando solo necesita insertar algunos elementos, pero me parece que estas opciones son muy malas desde el punto de vista de la mantenibilidad (el código se repite dos veces, por lo tanto, si se necesita algún cambio, debe ocurrir dos veces y luego se convierte en muy propenso al error),

Esto es (solo una pequeña parte) lo que tengo

<script type="text/javascript">
var phnFragment = "<tr><td align=\"right\">Telephone:</td><td colspan=\"2\"><select name=\"select\" size=\"1\"style=\"width: 100px;\"><option>-- Choose --</option><option>Home</option><option>Mobile</option><option>Work</option></select><input type=\"text\" size=\"20px\" /></td></tr>";
    $(document).ready(function() {
    $('#addmorephones').click(function() {
                $("#phones").append(phnFragment);
            });
    });
</script>
....
....
<tr id="phones">
        <td align="right">Telephone:</td>
        <td colspan="2"><select name="select" size="1"
            style="width: 100px;">
            <option>-- Choose --</option>
            <option>Home</option>
            <option>Mobile</option>
            <option>Work</option>
        </select><input type="text" size="20px" /> <a href="javascript:void(0);" id="addmorephones">[+]</a>
        </td>
    </tr>

¿Hay una mejor manera de lograr esto? ¿Hay alguna manera de decirle a JQuery que copie parte del árbol DOM y lo use como fragmento para insertar?

Me encantaría aprender alternativas

Answer 1

¿Hay alguna manera de decirle a JQuery que copie parte del árbol DOM y lo use como fragmento para insertar?

Sí: clone. (Ni siquiera necesitas jQuery para ello; cloneNode es parte de la API de DOM.) Si tiene alguna id valores en lo que clonas, deberás iterar sobre el resultado cambiándolos, por supuesto, ya que idS tiene que ser único. Pero es perfecto para cosas como hileras de mesa y similares.

En la carga de la página, puede obtener uno de los reales, clonarlo (sin adjuntarlo al documento), limpiarlo de cualquier cosa que no necesite y luego seguir clonando ese modelo. Ayuda a mantener su JavaScript un poco desacoplado de su marcado.

Ejemplo:

HTML:

<table>
  <tbody>
    <tr><td>I'm a row in the table</td></tr>
  </tbody>
</table>

JavaScript:

jQuery(function($) {
  var counter = 10,
      rowModel;

  // Get the row model, clone it, remove the
  // content we'll replace anyway.
  rowModel = $("tr:first").clone();
  rowModel.find("td:first").empty();

  // Do our first tick
  tick();

  // Use the model to append to the table
  function tick() {
    var clone = rowModel.clone();

    clone.find("td:first").html("Added at " + new Date());
    $("tbody:first").append(clone);

    // Again?
    if (--counter > 0) {
      setTimeout(tick, 500);
    }
  }

});

Copia en vivo

Obviamente, eso es un rápido y sucio, pero se entiende la idea. Si utiliza data-xyz atributos (permitidos en html5), names, classEs, etc., puede evitar atar su código demasiado estrechamente a su estructura.

Answer 2

En este caso, podría obtener el contenido de #phones Durante el evento listo:

$(document).ready(function() {
    var phnFragment = $("#phones").html();

    $('#addmorephones').click(function() {
        $("#phones").append(phnFragment);
    });
});

Si necesita copiar información más compleja (como eventos), puede usar el Método .Clone ():

$(document).ready(function() {
    var $phnFragment = $("#phones").children().clone();

    $('#addmorephones').click(function() {
        $("#phones").append($phnFragment.clone());
    });
});

Answer 3

TJ tiene una gran respuesta si tienes un marcado existente, quieres reutilizar. También puede usar el tipo de script de texto/html para poner su contenido en marcado como plantilla, como se demuestra aquí:

http://ejohn.org/blog/javascript-micro-templating/