私はフロントエンド開発に少し慣れていません。JS/JQueryを使用してオンザフライでHTMLを生成するときに、自分自身を繰り返さないことがよくある問題の1つです。
いくつかの状態を持つDOMオブジェクトについて考えてみましょう。多くの場合、JSでやりたいのは、ある状態から別の状態に切り替えることだけです。ただし、DOMオブジェクトを呼び出してこれをhtml()行うと、同じHTMLコードをいくつかの異なる場所（およびJSドキュメント）に記述できます。では、これを行うDRYの方法は何ですか？
基本的に、代わりに私がやりたいのは、HTMLドキュメントに各状態のサンプルDOMを事前に記述し（ドキュメント構造を変更せずに）、DOMを必要な状態のサンプルに置き換えることができるようにすることです。飛ぶ。
var state1= $(HTMLRootElement).detach();
$(document.body).append(state2);
state1変数への参照を失わない限り（そうでない場合はガベージコレクションされます）、後でこれを行うことができます。
var state2= $(HTMLRootElement).detach();
$(document.body).append(state1);
このように、HTML要素はまだメモリに存在し、DOMツリーには存在しません。
もう1つの方法は、問題のコンテンツを単に.hide（）および.show（）することです。.detach（）を使用すると、（別のdiv内のように）修正する代わりに、Webページの別の場所に必要な状態の要素を追加することを選択できます。
javascriptにはさまざまな種類のテンプレートエンジンがあります。いくつかのmustache.jsを挙げれば、underscore.jsにはテンプレートがあり、jqueryにはテンプレートがあります（ただし、jQueryバージョンはベータ版を超えることはありません）。
javascriptを使用してより複雑な処理を行う場合は、backbone.js、sammy.js、knockout.jsなどのフレームワークの使用を検討することもできます（他にもたくさんあります）。これらのフレームワークは、テンプレートも多用します（上記のフレームワークを使用します）。
複数のオプションを利用できます。
単純なオブジェクトの場合は、各状態のHTMLの変数を作成してから、.append（）または.html（）とチェーンされた.wrap（）関数を使用してDOMを更新することができます。
より複雑なDOMオブジェクトまたは相互作用については、JSテンプレートシステムを使用してください：jqueryテンプレート（http://api.jquery.com/category/plugins/templates/）またはハンドルバー（http://handlebarsjs.com/）。ヘルパーが非常に強力にするので、後者を強くお勧めします。