javascript - 重用 HTML 代码块

Question

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

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