Javascript 有没有可能将html内容分开，以便在append中更轻松？

我有一个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>");
  }
}

函数创建\u幻灯片（元素）{
控制台日志（元素）；
if（元素imgdestacado）{
旋转木马(
"\
旅游\
“+element.titulo+”
“+element.info+”
”；
}
if（element.imgpromo）{
旋转木马(
"\
旅游\
HolaEOOOOOO
”；
}
if（element.imgevento）{
旋转木马(
"\
爸爸\
“+element.titulo+”
“+element.info+”
”；
}
}

我不完全理解你的问题，但是使用回勾/回引号是否更容易，这样你就可以使用多行

例如：

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>

`);

carousel.append(`
旅游
${element.titulo}
${element.info}
`);