Неужели использование внутреннего HTML препятствует применению клиентской javascript на новом html?

Question

Я использую .inner html для получения информации из формы и повторного отображения списка (динамических c данных, отображаемых в форме кредитной карты. См., Например, следующую ссылку. https://codepen.io/quinlo/pen/YONMEa) в DOM. Однако, когда я отображаю эту информацию обратно в DOM, моя клиентская сторона Javascript, кажется, не применяется к новым элементам, перечитывая их идентификаторы и классы.

Фрагмент соответствующего кода

var renderElement = document.querySelector(".cardbox");
const html = '<div class="card-container preload" id="target" >'+
       '<div class="creditcardrender">'+
       '                            <div class="front">'+
       '                                <div id="ccsingle"></div>'+ ... etc

renderElement.innerHTML += html;

Это свойство HTML / Javascript, которое неизбежно или есть обходной путь для этой проблемы?

спасибо.

Answer 1

Если я правильно понял вопрос,

Использование renderElement.innerHTML += html; эквивалентно renderElement.innerHTML = renderElement.innerHTML + html;, что означает, что его значение представляет собой новую строку, полученную в результате объединения двух строк. Таким образом, существующий элемент HTML будет подвергнут рефакторингу так, как если бы вы его присваивали с нуля.

Чтобы добавить код HTML, который вы хотите представить, вы можете использовать функцию insertAdjacentHTML() для добавьте код HTML к элементу без реформирования существующего кода.

renderElement.insertAdjacentHTML('beforeend', html)