jQuery clone(): как изменить данные в скопированном эл-те?

Можно ли скопировать код переменной str и просто поменять в нем подставляемые данные?

let str = `<li class="single_comment_area" id="">
             <div class="comment-wrapper d-flex">
               <div class="comment-author">
                 <img src="img/blog-img/9.jpg" alt="">
               </div>
               <div class="comment-content">
                 <span class="comment-date">${data['createdAt']}</span>
                   <h5>${data['userName']}</h5>
                   <p>${data['body']}</p>
                   <a id="like" 
                       data-type="comment" 
                       data-comment_id="${data['id']}" href="#"
                   >Like</a>
                   <a class="active reply" id="reply"  
                       data-id="${data['id']}" href="#"
                   >Reply</a>
                   <div style="display: none" id="hidden${data['id']}">
                     <textarea class="textarea" 
                         data-textId="${data['id']}"  name="body"
                         id="body${data['id']}" cols="60" rows="10"
                     ></textarea>
                     <p>
                       <a href="#" class="active save" 
                           id="save${data['id']}"
                           data-toCommId="${data['commentId']}"
                           data-slug="${data['slug']}"
                           data-newsId="${data['newsid']}"
                           data-id="${data['id']}"
                       >Send</a>
                     </div>
                   </p>
                 </div>
               </div>
               <div id="reply_block${data['id']}"></div>`;

Ответы (1 шт):

Автор решения: Daniil Loban

преобразуйте функцию:

const getString  =  (data) => `<li class="single_comment_area" id="">
             <div class="comment-wrapper d-flex">
               <div class="comment-author">
                 <img src="img/blog-img/9.jpg" alt="">
               </div>
               <div class="comment-content">
                 <span class="comment-date">${data['createdAt']}</span>
                   <h5>${data['userName']}</h5>
                   <p>${data['body']}</p>
                   <a id="like" 
                       data-type="comment" 
                       data-comment_id="${data['id']}" href="#"
                   >Like</a>
                   <a class="active reply" id="reply"  
                       data-id="${data['id']}" href="#"
                   >Reply</a>
                   <div style="display: none" id="hidden${data['id']}">
                     <textarea class="textarea" 
                         data-textId="${data['id']}"  name="body"
                         id="body${data['id']}" cols="60" rows="10"
                     ></textarea>
                     <p>
                       <a href="#" class="active save" 
                           id="save${data['id']}"
                           data-toCommId="${data['commentId']}"
                           data-slug="${data['slug']}"
                           data-newsId="${data['newsid']}"
                           data-id="${data['id']}"
                       >Send</a>
                     </div>
                   </p>
                 </div>
               </div>
               <div id="reply_block${data['id']}"></div>`;

и когда будет нужна новая строка сделайте следующий вызов:

const newString = getString(data)
→ Ссылка