用Javascript/JQuery，乾的方式替換HTML

我是前端開發的新手，我常常遇到的一個問題是在使用JS/JQuery快速生成HTML時不會重複自己。用Javascript/JQuery，乾的方式替換HTML

讓我們考慮一個具有多個狀態的DOM對象。通常，你想要用JS做的事情就是從一個狀態切換到另一個狀態。但是通過調用DOM對象上的html()來做到這一點，可以讓您在幾個不同的地方（以及JS文檔中）編寫相同的HTML代碼。那麼幹這種做法是什麼？

基本上，我想要做的是，在我的HTML文檔中預先寫入每個狀態的示例DOM（不更改文檔結構），並且能夠將DOM替換爲狀態示例我想要在飛行中。

2012-09-10 nbarraille

這實際上有多少必須通過重寫DOM來完成？一種以DRY方式改變頁面的外觀/感覺和屬性的技術是保持一致的結構，但改變DOM的類定義。這可以讓你完全重新設置頁面。您還可以使用.hide（）和.show（）隱藏和顯示元素。這可以防止必須將大塊代碼寫入DOM。相反，您有選擇地重新設置和隱藏/顯示 –

聲音給我，就像您應該離開DOM生成的那樣，並且切換類來顯示/隱藏DOM的相關部分，而不是每次都嘗試重建相同的區域。 – zzzzBov

工廠方法！ – Shmiddty

var state1= $(HTMLRootElement).detach(); 
$(document.body).append(state2);

只要你不失去你的參考變量狀態1（否則會被垃圾收集），你可以後來才做到這一點：

var state2= $(HTMLRootElement).detach(); 
$(document.body).append(state1);

這樣的HTML元素仍然存在在內存中，它們只是不存在於DOM樹上。

另一種方法是簡單地將.hide（）和.show（）所涉及的內容。使用.detach（）你可以選擇在你的網頁的另一個地方添加你想要的狀態的元素，而不是固定的（就像在另一個div裏面一樣）。

2012-09-10 19:27:21 Hoffmann

在javascript中有不同類型的模板引擎。舉幾個mustache.js，underscore.js有模板，jquery也有模板（但jQuery版本從未通過測試）。

當你用JavaScript來做更復雜的事情時，你也可以考慮使用像backbone.js，sammy.js或knockout.js（還有更多）的框架。這些框架也大量使用模板（它們使用上面提到的那些模板）。

2012-09-10 19:22:53 Tosh

您提供多種選擇：

對於簡單的對象，可以爲每個國家的HTML創建一個變量，然後使用.wrap（）函數，用.append（）或.html鏈脫身（）來更新DOM。對於更復雜的DOM對象或交互，請使用JS模板系統：jquery模板（http://api.jquery.com/category/plugins/templates/）或句柄（http://handlebarsjs.com/）。對於更復雜的DOM對象或交互，請使用JS模板系統：jQuery模板（http://api.jquery.com/category/plugins/templates/）或句柄（http://handlebarsjs.com/）。我強烈建議後者，因爲助手使它非常強大。

2012-09-10 19:27:10 Gregone

回答