onclick и innerHTML

Подскажите, пожалуйста, почему событие 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';

Ответ

Любое изменение свойства 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');