как загрузить один и тот же HTML несколько раз с разными значениями

Question

В веб-приложении, разработанном с помощью скрипта Google, я хочу отобразить список идей с заголовком, описанием, инициатором, статусом и т. Д. Информация хранится в массиве объектов, которые называются «идеи»

.Индексный файл у меня есть таблица.

<table>
    <thead>
    </thead>
    <tbody id="listOfIdeas">
    </tbody>
</table>

В файле javascript я перебираю «идеи» и каждый раз добавляю строку, в которую вставляю различную информацию из массива, который я хочу отобразить

for (var i=0;i<ideas.length;i++){
$('#listOfIdeas')
  .append('<tr class="border-bottom shadow-down">'+
          '<td class="idea d-none">'+ideas[i].ideaNumber+'</td>'+
          '<td class="p-1">'+
              '<div class="main-cell p-1">'+
                  '<div><strong>'+ideas[i].title+'</strong>'+
                  '</div>'+
                  '<div class="desc" style="word-break:break-word;">'+ideas[i].description+
                  '</div><br>'+
                  '<div class="creatorInfo"><i><span class="founder">'+ideas[i].initiator+'</span>, '+
                          '<span>'+ideas[i].department+'</span>, '+
                          '<span class="heart far fa-thumbs-up"></span>'+
                          '<span class="score">'+ideas[i].count+'</span></i>, '+
                          '<span class="msg far fa-envelope"></span>'+
                  '</div>'+
                  '<div class="tags">'+
                  '</div>'+
                  '<div class="application">'+
                      '<span class="badge badge-info status"></span>'+
                      '<button class="float-right app-part d-none">Participate</button>'+
                  '</div>'+
              '</div>'+                          
          '</td>'+
          '</tr>')

Моя проблема в том, что, поскольку я хотел бы добавить новые функциональные возможности (с небольшим меню с кнопками), строка будет становиться все менее и менее читаемой.

Есть ли "чище" способ продолжить?Я чувствую, что было бы возможно добавить шаблон в индексный файл и скопировать его несколько раз с разными значениями, но я не уверен, является ли это лучшим решением.

Answer 1

Я буду использовать шаблонные литералы es6, используя обратные тики