Как добавить HTML-тег в JavaScript-код?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с JavaScript-кодом для бокового меню. Я хочу добавить иконку из набора Glyphicon, но когда пытаюсь вставить HTML-тег в код, он превращается в обычную строку.

Вот пример моего кода:

menuBok = new BokMenu([
  new PunktMeniu('Главная страница')
]);

menuBok.dobavitPunkt(new PodPunktMeniu('Поделиться', [
  new KnopkaPunkt('Фейсбук', function() {
    window.open('http://facebook.com/share');
  }, 'fb')
]));

Как мне правильно добавить HTML-тег с иконкой в этот JavaScript? Буду благодарен за любую помощь!

2

а я вот недавно столкнулся с похожей проблемой. в итоге решил использовать метод insertAdjacentHTML. он позволяет вставлять HTML-код в нужное место. вот как это можно сделать:

const knopka = new KnopkaPunkt(‘Фейсбук’, function() {
window.open(‘Redirecting...’);
}, ‘fb’);

knopka.element.insertAdjacentHTML(‘afterbegin’, ' ');

так иконка появится перед текстом кнопки. главное не забыть добавить пробел после закрывающего тега span. этот способ хорош тем, что позволяет отделить логику от разметки.

3

Можно создать отдельную функцию для генерации HTML с иконкой, например:

function createIconHtml(text, iconClass) {
return <span class=\"${iconClass}\"></span> ${text};
}

Потом использовать ее в коде:

menuBok.dobavitPunkt(new PodPunktMeniu(‘Поделиться’, [
new KnopkaPunkt(createIconHtml(‘Фейсбук’, ‘glyphicon glyphicon-share’), function() {
window.open(‘Redirecting...’);
}, ‘fb’)
]));

Так код будет чище и гибче.

4

Для добавления HTML в JS можно использовать шаблонные строки. Вот как это сделать:

menuBok.dobavitPunkt(new PodPunktMeniu('Поделиться', [
  new KnopkaPunkt(`<span class=\"glyphicon glyphicon-share\"></span> Фейсбук`, function() {
    window.open('http://facebook.com/share');
  }, 'fb')
]));

Обрати внимание на обратные кавычки и экранирование кавычек внутри. Так JS будет воспринимать HTML как строку, а браузер корректно отрендерит тег при вставке в DOM.