onclick и innerHTML

#javascript

Подскажите, пожалуйста, почему событие onclick в коде ниже не выполняется. Если убрать
последнюю строку с innerHTML, всё работает:



var div = document.createElement('div');
div.innerHTML = "Default message";
div.onclick = function(){this.innerHTML = 'Onclick message'}
document.body.appendChild(div);
document.body.innerHTML += 'Next line';



    

Ответы

Ответ 1

Любое изменение свойства innerHTML приводит к полной замене всех элементов.

Таким образом, после выполнения 

document.body.innerHTML += 'Next line';


элемент div, которому был добавлен обработчик, был удален, и вместо него теперь новый
div, которому обработчик не добавляли.

Для решения можно или собрать всю строку сразу, и лишь затем навесить обработчики



var div = `
Default message
`;
document.body.innerHTML += div;
document.body.innerHTML += 'Next line';

document.getElementById('div').onclick = function() {
  this.innerHTML = 'Onclick message'
}




или не использовать innerHTML, а создавать элементы напрямую:



var div = document.createElement('div');
div.innerHTML = "Default message";
div.onclick = function() {
  this.innerHTML = 'Onclick message'
}
document.body.appendChild(div);
var textNode = document.createTextNode('Next line');
document.body.appendChild(textNode);




Альтернативным способом добавления разметки, как подсказывают в комментариях, может
стать использование метода insertAdjacentHTML



var div = document.createElement('div');
div.innerHTML = "Default message";
div.onclick = function() {
  this.innerHTML = 'Onclick message'
}
document.body.appendChild(div);
div.insertAdjacentHTML('afterEnd', 'Next line');