Уважаемые знатоки!
Всем доброго времени суток. Осваиваю JavaScript, с основами все вроде ничего. Сейчас мучаю DOM. В процессе обучения столкнулся вот с каким вопросом. Можно ли поменять местами ноды в родительском элементе, т.е. что бы элементы
item у родителя
wrap меняли свое расположение.
В HTML:
враппер, где лежат несколько элементов:
<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
и есть кнопка, по нажатию которой будет происходить сие действие:
<form action="">
<button value="Start" class="start-btn">Старт</button>
</form>
В Js:
Получаем кнопку и все item(ы).
var btnStart = document.querySelector(".start-btn")
var items = document.getElementsByClassName('item');
Далее инициализируем массив, куда положим потом наши item(ы)
var itemsArr = [];
Теперь пробегаемся по нашему объекту items и кладем все значения в массив.
for (var data in items) {
if (!items.hasOwnProperty(data)) continue
itemsArr.push(items[data]);
}
Теперь напишем наш шафл, который будет менять местами item(ы)
function shuffle(itemsArr) {
itemsArr.sort(function () {
return 0.5 - Math.random()
})
}
И теперь по клику у нас должна генериться новая сетка.
btnStart.addEventListener("click", function (event) {
console.log("Поменял!");
event.preventDefault();
shuffle(itemsArr);
А как в HTML это запихнуть?
});
Если посмотреть в консоль, itemsArr меняет свой порядок при клике, НО, как это отрисовать в HTML?
appendChild не работает.
Готов к критике, но только объективной. Если подобные задачи уже были рассмотрены, ткните пальцем пожалуйста, где.
Заранее спасибо.
