Слетает чекбокс при добавлении элемента в DOM
Всем привет!
Помогите. Такой бред случился... В этом примере кнопка добавляет новые элементы в список. Если перед добавлением нового элемента снять галочку с уже существующего чекбокса или наоборот - поставить, то этот выбор слетает после добавления нового элемента. Как это можно вылечить?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<button class="btn">Добавить элемент</button>
<ul class="myUl">
<li>
<input type="checkbox" class="checkbox" checked>
<span class="msg"> text </span>
</li>
<li>
<input type="checkbox" class="checkbox" >
<span class="msg"> text </span>
</li>
</ul>
<script>
var ul = document.querySelector('.myUl');
var add = document.querySelector('.btn');
add.addEventListener("click", fun);
function fun(){
ul.innerHTML += '<li><input type="checkbox" class="checkbox" ><span class="msg"> text </span></li>';
}
</script>
</body>
</html>
|
ul.innerHTML += x - это шорткат к ul.innerHTML = ul.innerHTML + x;
Естественно содержимое переписывается полностью. Используйте dom методы: document.createElement, element.appendChild итд. |
Aetae,
Хм, не знал... Значит придется все переделать. Спасибо за информацию) |
| Часовой пояс GMT +3, время: 01:43. |