重用HTML代碼塊

在我正在處理的其中一個頁面中，我必須一次又一次地重複使用html代碼塊。這是一個遺留應用程序，整個html，js代碼都很舊。有問題的HTML代碼塊超過200行代碼。我使用目前的做法是將塊轉換成JavaScript和整個塊存儲在一個變量，然後返回它重用HTML代碼塊

function getItemBlock() { 
var strItemBlock=""; 
    strItemBlock += "<div class=\"itemblock newitem\" >"; 
    strItemBlock += "<h5>Item <span class=\"itemnum\"><\/span> <button lass=\"btnDeleteItem btn\">Delete Item<\/button><\/h5>"; 
    strItemBlock += "<div class=\"row\">"; 
    strItemBlock += "<div class=\"col\">"; 
    strItemBlock += "<\/div>"; 
    return strItemBlock; 
}

另一種方法，我可以使用使用Javascript的createElement這將創造整個結構表現得更加忙碌，速度更慢。我有什麼選擇，我正在尋找使用JavaScript的客戶端選項。

來源

2014-05-05 budding_fed

我建議使用cloneNode來克隆結構。 – adeneo

這意味着我必須在頁面上提供代碼塊。「性能變慢」 –

你確定嗎？ –

我通常只是創建這樣一個數組：

function getItemBlock() { 
    var strItemBlock=['<div class="itemblock newitem" >', 
       '<h5>Item <span class="itemnum"><\/span>',          
       '<button class=\"btnDeleteItem btn\">Delete Item<\/button>', 
       '<\/h5>', 
       '<div class=\"row\">', 
       '<div class=\"col\">', 
       '<\/div>'] 
    return strItemBlock.join('\n'); 
} 

$('#wrapper').append(getItemBlock());

DEMO

來源

2014-05-05 19:17:08

我將使用的方法LaughDonor建議用戶，這裏有評論

@budding_fed上下文您的HTML塊更改獨立於您擁有的其他頁面。因此，在同一頁面上，如果您使用的是同一個塊，那麼使用document.createElement（）和element.cloneNode（）將是最快的。生成代碼來創建元素取決於你和它所在的頁面。那裏有很多JSPerf鏈接，這裏有另外一個。 - LaughDonor 20分鐘前

如果您更容易將它作爲字符串，請將其轉換爲DOM元素一次，然後將其克隆多次，然後多次爲該頁的其餘部分進行克隆。 - LaughDonor 18分鐘前

來源

2014-05-05 19:35:56

重用HTML代碼塊

回答

相關問題