Ответы пользователя по тегу HTML
  • Как менять HTML элементы местами с помощью JS?

    MaxAlexQNEI
    @MaxAlexQNEI
    Web-Developer
    То что вам нужно - insertBefore (MDN)
    <section class="wrapper">
       <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>
    </section>


    var itemListParent = document.querySelector('.wrapper');
    var itemList = document.querySelectorAll('.item');
    
    // сработает как appendChild (т.к. второй аргумент null) - поместит второй элемент в конец родительского.
    itemListParent.insertBefore(itemList[1], null);
    
    // сработает как того предполагает insertBefore() - вставит пятый элемент перед первым
    itemListParent.insertBefore(itemList[4], itemList[0]);


    Плюс применения insertBefore (или appendChild) в том, что прикрепленные слушатели к элементу не сотрутся как в случае использования innerHTML.
    Ответ написан
    1 комментарий