Блог

Главная - Вопросы по программированию - Добавление в класс в HTML-строке, хранящейся как переменная JavaScript

Добавление в класс в HTML-строке, хранящейся как переменная JavaScript

#javascript #html #getelementbyid

Вопрос:

У меня есть HTML-строка, сохраненная в качестве переменной JavaScript в моем js-коде:

 myHTML= `<div id="type1-div"><p id="type1-lbl"> </p>
                    <img id="type1-img" class="center stim" src="${myFolder}/photo${n}.png"></div>
                    <div id="type2-div"><p id="type2-lbl"> </p>
                    <img id = "type2-img" class="center stim" src="${myFolder}/photo${m}.png"</div>`;

Затем я хочу добавить в класс эти элементы на основе определенных условий и изменить часть их содержимого на основе их идентификатора.
Они, например, не работали, так как (я думаю?) myHTML еще не является частью HTML-документа.

 document.getElementById("type1-div").classList.add("top");
document.getElementById(id).innerHTML = "TOP PARAGRAPH"

Пример желаемого желаемого вывода будет таким, что myHTML теперь:

  `<div id="type1-div" class="top"><p id="type1-lbl">TOP PARAGRAPH</p>
                        <img id="type1-img" class="center stim" src="${myFolder}/photo${n}.png"></div>
                        <div id="type2-div" class="bottom"><p id="type2-lbl">BOTTOM PARAGRAPH </p>
                        <img id = "type2-img" class="center stim" src="${myFolder}/photo${m}.png"</div>`;

Есть какие-нибудь идеи о том, как этого добиться? Спасибо!

Комментарии:

1. document.getElementById(id).innerHTML = new HTML , что это HTML такое ? Ты имеешь в виду document.getElementById(id).innerHTML = myHTML ?

2. Вы можете создать DocumentFragment и использовать myHTML его в качестве своего innerHTML . Тогда вы можете использовать методы DOM для этого.

3. @Phix извини, я виноват. Отредактировано сейчас!

4. Узел должен быть в DOM, чтобы получить его по идентификатору. Возможно, вы хотите создать такие элементы, как const varNameHere = document.createElement(tagNameHere) вместо этого, чтобы вы могли получить элемент до того, как он будет добавлен в DOM. Затем вы также можете прикрепить события непосредственно к переменной. Я бы также использовал .textContent = вместо .innerHTML = .

Метки: ,