Как отсортировать DOM-элементы?

Question

[CreativeStory]

Есть верстка:

<div class="all">
    <div class="item">
        <h4>Title<h4>
        <p class="price">150</p>
    </div>
    <div class="item">
        <h4>Title<h4>
        <p class="price">34</p>
    </div>
    <div class="item">
        <h4>Title<h4>
        <p class="price">28</p>
    </div> 
    <div class="item">
        <h4>Title<h4>
        <p class="price">120</p>
    </div>
    <div class="item">
        <h4>Title<h4>
        <p class="price">230</p>
    </div>

Нужно сортировать элементы .item в зависимости от содержимого вложенных .price.
Видимо должен создаваться новый массив объектов и после обработки замещать старый контент типа

document.querySelector('.all').innerHTML = sortArrHTML

Comments

[Yustas Alexu]

сортировать должен бэкенд. Если завтра пагинацию, фильтрацию и поиск нужно будет прикрутить, вы это тоже через js и html будете делать?

Answer 1

[Stalker_RED]

Обратите внимание, что при этом не слетают обработчики, если они есть. В отличие от использования innerHTML.

Comments

[CreativeStory]

Благодарю вас!