Можно ли разделить содержимое 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>

`);