onclick и innerHTML

291

09 марта 2017, 23:30

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

Answer 1

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

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

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

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

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

var div = `<div id="div">Default message</div>`; 
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');