JQuery: inserendo grandi quantità di HTML attraverso la manipolazione DOM - manutenibilità?

Question

Ho trovato buoni post su buone pratiche che inseriscono elementi DOM usando jQuery come questo, questo e questo

Va bene quando devi solo inserire alcuni elementi, ma mi sembra che queste opzioni siano molto negative dal punto di vista della manutenibilità (il codice viene ripetuto due volte, quindi se è necessario un cambiamento, è necessario che si verifichi due volte molto incline all'errore),

Questa è (solo una piccola parte) quello che ho

<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>

C'è un modo migliore per raggiungere questo obiettivo? C'è un modo per dire a JQuery di copiare parte dell'albero DOM e usarlo come frammento per inserire?

Mi piacerebbe imparare alternative

Answer 1

C'è un modo per dire a JQuery di copiare parte dell'albero DOM e usarlo come frammento per inserire?

Sì: clone. (Non hai nemmeno davvero bisogno di jQuery per questo; cloneNode fa parte dell'API DOM.) Se ne hai qualcuno id Valori in ciò che clone, dovrai ripetere il risultato cambiandoli, ovviamente, da allora idS deve essere unico. Ma è perfetto per cose come le righe da tavolo e simili.

Nel caricamento della pagina, puoi prenderne uno dei reali, clonarlo (senza attaccarlo al documento), purificarlo da tutto ciò di cui non hai bisogno e quindi continuare a clonazione di quel modello. Aiuta a mantenere il tuo JavaScript un po ' disaccoppiato dal tuo markup.

Esempio:

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 dal vivo

Ovviamente è un rapido e divo, ma hai l'idea. Se usi data-xyz attributi (consentiti in html5), nameS, classES, ecc., Puoi evitare di legare il codice troppo da vicino alla tua struttura.

Answer 2

In questo caso, potresti afferrare il contenuto di #phones Durante l'evento pronto:

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

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

Se è necessario copiare informazioni più complesse (come gli eventi), è possibile utilizzare il Metodo .Clone ():

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

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

Answer 3

TJ ha un'ottima risposta se hai un markup esistente che vuoi riutilizzare. È inoltre possibile utilizzare il tipo di script text/html per mettere il contenuto in markup come modello, come dimostrato qui:

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