jQuery：DOM操作を通じて大量のHTMLを挿入する - 保守性？

Question

jqueryを使用してDOM要素を挿入する良い実践に関する良い投稿を見つけました これ, これ と これ

いくつかの要素を挿入する必要がある場合は問題ありませんが、これらのオプションは保守性の観点から非常に悪いように思えます（コードは2回繰り返されます。したがって、変更が必要な場合は2回発生する必要があります。非常にエラーが発生しやすい）、

これは（ほんの少しの部分）私が持っているものです

<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 あなたがクローンするものの値は、もちろん、結果を繰り返す必要があります。 idSはユニークでなければなりません。しかし、テーブルの行などに最適です。

ページの読み込みで、実際のものの1つをつかみ、それをクローン（ドキュメントに取り付けずに）、必要のないものをクレンジングしてから、そのモデルをクローニングし続けることができます。 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);
    }
  }

});

ライブコピー

明らかにそれは素早くてdirtyですが、あなたはアイデアを得ることができます。使用する場合 data-xyz 属性（HTML5で許可）、 nameS、 classESなど、コードを構造に近づけすぎないようにすることはできません。

Answer 2

この場合、あなたはの内容をつかむことができます #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());
    });
});

Answer 3

TJには、再利用したい既存のマークアップがある場合は素晴らしい答えがあります。テキスト/HTMLスクリプトタイプを使用して、ここで示すように、コンテンツをテンプレートとしてマークアップに配置することもできます。

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