В следующем примере кода я прикрепляю onclick
обработчик событий к диапазону, содержащему текст «foo». Обработчик - это анонимная функция, которая выводит файл alert()
.
Однако, если я назначу родительскому узлу innerHTML
, этот onclick
обработчик событий будет уничтожен - нажатие «foo» не вызовет всплывающего окна предупреждения.
Это поправимо?
<html>
<head>
<script type="text/javascript">
function start () {
myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";
}
</script>
</head>
<body onload="start()">
<div id="mydiv" style="border: solid red 2px">
<span id="myspan">foo</span>
</div>
</body>
</html>
Ответы:
К сожалению, присвоение
innerHTML
вызывает уничтожение всех дочерних элементов, даже если вы пытаетесь добавить. Если вы хотите сохранить дочерние узлы (и их обработчики событий), вам нужно будет использовать функции DOM :Изменить: решение Боба из комментариев. Опубликуйте свой ответ, Боб! Получите за это кредит. :-)
источник
Использование
.insertAdjacentHTML()
сохраняет прослушиватели событий и поддерживается всеми основными браузерами . Это простая однострочная замена.innerHTML
.В
'beforeend'
аргумент указывает , где в элементе , чтобы вставить содержимое HTML. Варианты'beforebegin'
,'afterbegin'
,'beforeend'
, и'afterend'
. Их соответствующие местоположения:источник
Сейчас 2012 год, и в jQuery есть функции добавления и добавления, которые делают именно это, добавляют контент, не влияя на текущий контент. Очень полезно.
источник
.insertAdjacentHTML
существует с IE4В качестве небольшой (но связанной) помощи, если вы используете библиотеку javascript, такую как jquery (v1.3), для манипуляций с dom, вы можете использовать живые события, с помощью которых вы настраиваете обработчик, например:
и он будет применяться к этому селектору всегда при любых манипуляциях с jquery. Для прямых трансляций см .: docs.jquery.com/events/live, для манипуляций с jquery см .: docs.jquery.com/manipulation
источник
Я создал свою разметку для вставки в виде строки, так как она меньше кода и легче читается, чем работа с причудливыми материалами dom.
Затем я сделал его внутренним HTML временным элементом, чтобы я мог взять единственный дочерний элемент этого элемента и прикрепить его к телу.
источник
something.innerHTML + = 'добавь все, что хочешь';
у меня это сработало. Я добавил кнопку во вводимый текст, используя это решение
источник
Есть еще одна альтернатива: использование,
setAttribute
а не добавление прослушивателя событий. Как это:источник
Да, это возможно, если вы привязываете события с помощью атрибута тега
onclick="sayHi()"
непосредственно в шаблоне, подобном вашему<body onload="start()">
- этот подход аналогичен фреймворкам angular / vue / react / etc. Вы также можете использовать<template>
для работы с «динамическим» HTML, как здесь . Это не строгий ненавязчивый js, но он приемлем для небольших проектов.источник
Потеря обработчиков событий - это, ИМО, ошибка в том, как Javascript обрабатывает DOM. Чтобы избежать такого поведения, вы можете добавить следующее:
источник
mydiv.onclick
. Только onclick внутреннего диапазона переопределяетсяinnerHTML +=
.Сделать это можно так:
источник
Самый простой способ - использовать массив и вставлять в него элементы, а затем динамически вставлять в него последующие значения массива. Вот мой код:
источник
Для любого массива объектов с заголовком и данными.
jsfiddle
https://jsfiddle.net/AmrendraKumar/9ac75Lg0/2/
источник
Я ленивый программист. Я не использую DOM, потому что это кажется лишним набором текста. Для меня чем меньше кода, тем лучше. Вот как я бы добавил «bar», не заменяя «foo»:
источник