重用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代码块

回答

相关问题