Изменение порядка элементов

Question

Я создаю сайт с плавающей шириной. Пользователи используют смартфоны с разрешением Full HD до 600 пикселей на смартфонах, что кажется довольно хорошей идеей. Это поднимает очень интересную проблему.

Когда пользователь использует меньшее разрешение, чем оптимальное, страница получает гораздо большую высоту. Это означает, что может быть полезно изменить порядок некоторых элементов (например, изображения, поля поиска или навигации), чтобы сделать страницу более удобочитаемой без особой необходимости прокрутки.

Так что мне нужно иметь возможность получить доступ к DOM и изменить порядок некоторых элементов страницы (поменять их местами).

Допустим, у меня есть список и мне нужно поменять местами пункты 1 и 2.

<ul>
  <li>1</li>
  <li>2</li>
</ul>

Я нашел решение, основанное на добавлении уже элементов элементов к <ul> с помощью функции appendChild. Однако существует проблема с текстовыми узлами, и это действительно сложно сделать для более сложной структуры элементов, поскольку возникает необходимость воссоздать ее целиком.

Есть ли у вас какие-либо предложения по его улучшению?

Answer 1

Для этого простого случая (меняются только два элемента), вы можете просто использовать appendChild() ( fiddle )

var list = document.querySelector("ul");
list.appendChild(list.firstElementChild);

Один и тот же узел не может существовать в нескольких позициях; поэтому он удаляется из своей текущей позиции и помещается в конец коллекции.

Если вы хотите выполнить более сложную сортировку, вам, вероятно, следует создать массив из childNodes ( yaf ) и полностью сойти с ума:

var list = document.querySelector("ul");
var items = list.querySelectorAll("li");
var sortedList = Array.from(items).sort(function(a, b) {
  var c = a.firstElementChild.textContent,
  d = b.firstElementChild.textContent;
  return c < d ? -1 : c > d ? 1 : 0;
});
for (let item of sortedList) {
  list.appendChild(item);
}

Answer 2

В 2018 году (и уже несколько лет назад) это возможно только с помощью CSS.Ваш вариант использования будет решен примерно так:

ul {
  display: flex;
  flex-direction: column;
}

li:nth-child(2) {
  order: -1;
}

Answer 3

не подкачка innerHTML также работает?

var myList = document.getElementsByTagName("ul")[0]; 
temp = myList.getElementsByTagName("li")[0].innerHTML;
myList.getElementsByTagName("li")[0].innerHTML = myList.getElementsByTagName("li")[1].innerHTML;
myList.getElementsByTagName("li")[1].innerHTML = temp;