[Руднев]

Уважаемые знатоки!

Всем доброго времени суток. Осваиваю 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 не работает.


Готов к критике, но только объективной. Если подобные задачи уже были рассмотрены, ткните пальцем пожалуйста, где.

Заранее спасибо.