Как вставить созданный элемент в строку?

Question

[Алексей]

Всем привет, мне нужно на элемент навесить события, и вставить его в уже готовую строку элементов, которая потом вставляется в DOM элемент. Как это сделать примерно вот таким способом? https://jsfiddle.net/ay8zg75b/

let datePicker = document.createElement("div");
datePicker.className = 'datePickerInline';
// тут накладываем на элемент всякие события

let str = '<div><span>Вставляем</span><div>' + datePicker + '</div><div><p>в уже готовые html элементы в виде строки</p></div></div>';

let el = document.getElementById('element');
el.innerHTML = str;

Я рассматривал вариант, чтобы создавать каждый из элементов строки отдельно и добавлять их друг друга с помощью innerHTML, но там очень много элементов с очень большим количеством вставок текстов. По сути пол страницы генерируется на стороне javascript с использованием обычной строки содержащей HTML элементы

Answer 1

[Сергей Соколов]

Строка с HTML — это просто строка текста. Без слушателей событий и свойств DOM элементов.

Вариант: держать в строке плейсхолдер, скажем пустой div с определённым id или классом, и после вставки HTML в документ, заменять тот пустой див на супер-пупер элемент-с-событиями:

const datePicker = document.createElement("div");
datePicker.className = 'datePickerInline';
// тут накладываем на элемент всякие события

const str = '<div><span>Вставляем</span><div> <div class="replace_me"></div> </div><div><p>в уже готовые html элементы в виде строки</p></div></div>';

let el = document.getElementById('element');
el.innerHTML = str;

el.querySelector('div.replace_me').replaceWith(datePicker);

План-Б: не вешать слушателей событий прямо на элементы datePicker'а, а слушать его события выше, на общем родителе: скажем, на том el, в который всё это вставляется.

Answer 2

[Алексей Уколов]

Это невозможно.
Вы можете либо вставлять в строку элементы-плейсхолдеры, потом находить их после добавления на страницу и делать в них appendChild вашего элемента.
Или же рендерить строку с полной разметкой, а потом искать нужные элементы и навешивать на них события.
Выбор зависит от того, насколько сложная разметка у вашего элемента.