Question

在我正在处理的一个页面中，我必须一次又一次地重用一个html代码块。这是一个遗留应用程序，整个html，js代码很老。有问题的HTML块超过200行代码。我正在使用的当前方法是在javascript中转换块并将整个块存储在变量中然后返回它

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寻找客户端选项。

Answer 1

我通常只是创建一个数组：

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

Answer 2

我将使用用户LaughDonor建议的方法，这里是评论

@budding_fed HTML块更改的上下文独立于您拥有的其他页面。因此，在同一页面上，如果您使用相同的块，那么使用document.createElement（）和element.cloneNode（）将是最快的。生成代码以创建元素取决于您及其所在的页面。那里有很多JSPerf链接，这是另一个。 - LaughDonor 20分钟前

如果您更容易将其作为字符串，请继续将其转换为DOM元素一次，然后将其复制多次，以满足该页面的其余部分。 - LaughDonor 18分钟前

重用HTML代码块

2 个答案: