Как отсортировать массив в обратном порядке?

Question

[Mesuti]

Привет!

Элементы массива надо вставить с помощью .after()
Однако, в таком случае элементы встают в обратном порядке.
Возможно ли вывести в обратном порядке?

Или целесообразней изменить метод вставки на .before()?

Comments

[twobomb]

var arrayWords = ['a','b','c','d','f'];

arrayWords.reverse().map(n => {
	let p = document.createElement('p');
  p.innerHTML = n;
  document.querySelector('.listing').after(p);
})

[Mesuti]

twobomb, Спасибо! Из головы выпал reverse. Напишите, пожалуйста, ответом, отмечу

Answer 1

[dollar]

Можно просто через цикл с обращением по индексам в обратном порядке.

for (let i = arrayWords.length-1; i >= 0; i--) {
  let n = arrayWords[i];
  //..............
}

Кстати, а почему вы в такой ситуации использовали map вместо forEach?

Comments

[Mesuti]

Спасибо за ответ!
Изучаю map по учебнику, возникают иногда вопросы.. =)

Answer 2

[twobomb]

var arrayWords = ['a','b','c','d','f'];

arrayWords.reverse().map(n => {
  let p = document.createElement('p');
  p.innerHTML = n;
  document.querySelector('.listing').after(p);
})

Answer 3

[0xD34F]

const first = document.querySelector('.listing');
const tag = 'p';
const arr = [...'ABCDEF'];

Обратный порядок не нужен:

first.after(...arr.map(n => {
  const el = document.createElement(tag);
  el.innerHTML = n;
  return el;
}));

// или

first.replaceWith(first, ...arr.reduce((acc, n, i) => (
  (acc[i] = document.createElement(tag)).innerHTML = n,
  acc
), []));

// или

arr.reduce((prev, n) => (
  prev.insertAdjacentElement('afterend', document.createElement(tag)),
  prev.nextSibling.innerHTML = n,
  prev.nextSibling
), first);

// или

const parent = first.parentNode;
const nodes = parent.childNodes;

arr.forEach(function(n) {
  const el = document.createElement(tag);
  el.innerHTML = n;
  parent.insertBefore(el, nodes[++this[0]]);
}, [ Array.prototype.indexOf.call(nodes, first) ]);

// или

first.insertAdjacentHTML(
  'afterend',
  arr.map(n => `<${tag}>${n}</${tag}>`).join('')
);