javascript - 是否可以将 html 内容分开以使其更容易 append ？

Question

我有一个 JS 函数，可以将 html 内容 append 到某些标签。问题是我必须添加更多内容，因此复杂性就出现了。是否可以在不影响变量范围的情况下分离纯 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>

`);