是否有可能将html内容分隔开以使其易于附加？

Question

我有一个JS函数，可将html内容附加到某些标签。问题是我必须添加更多的内容，因此会产生复杂性。是否可以在不影响变量范围的情况下分离纯HTML，以便更轻松地对其进行放大？我附上代码：

function create_slide(element){
  console.log(element);
  if (element.imgdestacado){
    carousel.append(
      "<div class=\"carousel-item\"><img class=\"d-block w-100 darken\" src="+ element.imgdestacado.url +">\
      <div class=\"corner-comercio\"><span>Turismo</span></div>\
      <div class=\"carousel-caption d-none d-md-block\"><h1 class=\"display-1 text-left\">"+ element.titulo +"</h1><p class=\"display-4 text-left\">"+ element.info +"</p></div></div>");
  }
  if (element.imgpromo){
    carousel.append(
      "<div class=\"carousel-item \"><img class=\"d-block w-100\" src="+ element.imgpromo.url +">\
      <div class=\"corner-comercio\"><span>Turismo</span></div>\
      <div class=\"carousel-caption d-none d-md-block\"><h1>Hola</h1><p>Eoooooooooo</p></div></div>");
  }
  if (element.imgevento){
    carousel.append(
      "<div class=\"carousel-item \"><img class=\"d-block w-100\" src="+ element.imgevento.url +">\
      <div class=\"corner-comercio\"><span>Actualidad</span></div>\
      <div class=\"carousel-caption d-none d-md-block\"><h1 class=\"display-1\">"+ element.titulo +"</h1><p class=\"display-4\">"+ element.info +"</p></div></div>");
  }
}

Answer 1

我不太清楚您的问题，但是使用反引号/反引号会更容易，以便您能够使用多行吗？

示例：

carousel.append(`

<div class="carousel-item">
    <img class="d-block w-100 darken" src="${element.imgdestacado.url}">
    <div class="corner-comercio">
        <span>Turismo</span>
    </div>
    <div class="carousel-caption d-none d-md-block">
        <h1 class="display-1 text-left">${element.titulo}</h1>
        <p class="display-4 text-left">${element.info}</p></div>
    </div>
</div>

`);