Javascript 重用HTML代码块

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

函数getItemBlock（）{
var strItemBlock=“”；
strItemBlock+=“”；
strItemBlock+=“项目删除项目”；
strItemBlock+=“”；
strItemBlock+=“”；
strItemBlock+=“”；
返回横档；
}

我可以使用的另一种方法是使用javascript createElement创建整个结构，这将更加繁忙，性能也会降低。 我有哪些选项，我只寻找使用javascript的客户端选项。

---

我通常只创建一个数组，如下所示：

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());

函数getItemBlock（）{
变量strItemBlock=[''，
“项目”，
“删除项目”，
'',
'',
'',
'']
返回strItemBlock.join（'\n'）；
}
$（'#wrapper'）.append（getItemBlock（））；

---

我将使用用户建议的方法，下面是评论

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

---

如果您更容易将其转换为字符串，请将其转换为DOM元素一次，然后在该页面的其余部分复制任意次数18分钟前，我建议使用cloneNode来克隆结构。这意味着我必须在页面的某个位置提供代码块。“性能较慢”你确定吗？不一定，你也可以克隆只存在于内存中的元素。通常使用createElement，片段等将比仅仅将整个HTML字符串粘贴到某个地方更快、更可读，它仍然需要被解析。也许写得更快些

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());