How to edit an HTML block that contains a variable in JS?

Question

JavaScript

Good afternoon, faced such task for the first time. I have a variable that returns an HTML block and I need to interact with the classes in that block.

Block

<tr id="rcmrowMjEzOQ" class="message unread rcmfd_mh_row rcmfd_mh_row_dark" style="background-color: rgb(255, 0, 0);">
    <td class="subject"><span class="fromto skip-on-drag"><span class="adr"><span title="[email protected]" class="rcmContactAddress">RoffDaniel</span></span></span>
        <span class="date skip-on-drag">Пт 17:40</span>
        <span class="subject">
            <span id="msgicnrcmrowMjEzOQ" class="msgicon status unread" title="Непрочитанные "></span>
            <a href="./?_task=mail&amp;_mbox=INBOX&amp;_uid=2139&amp;_action=show" onclick="return rcube_event.keyboard_only(event)" onmouseover="rcube_webmail.long_subject_title(this,1)" tabindex="-1"><span>Test</span></a></span>
    </td>
    <td class="flags">
        <span class="flag"><span id="flagicnrcmrowMjEzOQ" class="unflagged" title="Не помеченные"></span></span>
        <span class="attachment">&nbsp;</span>
    </td>
</tr>

How can this be done without crutches like "insert this block into another invisible block, edit it there and copy it to where it is needed." This doesn't work as I'm working with a plugin for RoundCube and this option doesn't quite fit

Thanks!

Answer 1

Instead of a variable that returns an html block, you can create a function that will return the same block, and pass values ​​for classes to the function arguments. For html, use template string -
https://developer.mozilla.org/en/docs/Web/JavaScri...
Something like this -

function getMyHTML(className) {
   return `<td class="${className}">...</td>`;
}

const my_html = getMyHTML("flags");

Answer 2

This is called a template engine, for javascript there are a million of them and a small cart, you can even replace some labels in the text definition of your block with variable values ​​​​with a simple string replace.