Как отредактировать HTML блок, который содержит переменная в JS?

Question

[RoffDaniel]

Добрый день, столкнулся с такой задачей впервые. Есть переменная которая возращает HTML блок, и мне нужно взаимодействовать с классами в этом блоке.

Блок

<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="[e-mail]" 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>

Как это можно сделать без костылей типа "вставить этот блок в другой невидимый блок, редактировать его там и скопировать его туда, куда надо". Это не подходит, так как я работаю с плагином для RoundCube, и этот вариант не совсем подходит

Спасибо!

Comments

[Владимир]

тип переменной строка или html element?

[RoffDaniel]

Владимир, string

Answer 1

[Михаил Нестеров]

Вместо переменной, которая возвращает html-блок, можете создать функцию, которая будет возвращать тот-же блок, а в аргументы функции передавайте значения для классов. Для html используйте шаблонную строку -
https://developer.mozilla.org/ru/docs/Web/JavaScri...

Примерно так -

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

const my_html = getMyHTML("flags");

Answer 2

[rPman]

Это называется шаблонизатор, для javascript их миллион и маленькая тележка, можете даже простым string replace подменять какие то метки в текстовом определении вашего блока на переменные значения.