JQuery: Вставка большого количества html через манипуляцию DOM - ремонтопригодность?

Question

Я нашел хорошие посты о хорошей практике вставки элементов dom с использованием jquery, таких как , , , и ,

Это нормально, когдавам просто нужно вставить несколько элементов, но мне кажется, что эти опции очень плохи с точки зрения удобства сопровождения (код повторяется дважды, поэтому, если требуется какое-либо изменение, оно должно произойти дважды, тогда оно становится очень склонным кошибка),

Это (только небольшая часть) того, что у меня есть

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

Есть ли лучший способ сделать это?Есть ли способ сказать jquery скопировать часть дерева dom и использовать его как фрагмент для вставки?

Хотел бы узнать альтернативы

Answer 1

Есть ли способ указать jquery скопировать часть дерева dom и использовать его как фрагмент для вставки?

Да: clone.(Вам даже не нужен jQuery для этого; cloneNode является частью DOM API.) Если у вас есть какие-либо значения id в том, что вы клонируете, вам нужно будет выполнить итерацию порезультат их изменения, конечно, так как id s должны быть уникальными.Но он идеально подходит для таких вещей, как строки таблиц и т. П.

При загрузке страницы вы можете получить один из реальных, клонировать его (не прикрепляя его к документу), очистить его от всего, что вам не нужнонужно, а потом просто продолжать клонировать эту модель.Помогает отсоединить ваш JavaScript в некоторой степени от вашей разметки.

Пример:

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);
    }
  }

});

Live copy

Очевидно, что это быстро и грязно, но вы поняли идею.Если вы используете атрибуты data-xyz (разрешено в HTML5), name s, class es и т. Д., Вы можете избежать привязки кода слишком близко к вашей структуре.

Answer 2

У TJ отличный ответ, если у вас есть существующая разметка, которую вы хотите использовать повторно.Вы также можете использовать тип сценария text / html, чтобы поместить свой контент в разметку как шаблон, как показано здесь:

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

Answer 3

В этом случае вы можете получить содержимое #phones во время события готовности:

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

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

Если вам нужно скопировать более сложную информацию (например, события), вы можете использовать метод .clone () :

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

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