Сортировать элементы vanila JS

Question

Я хочу отсортировать элементы DOM.Это мой код

function sortP() {
var p = document.body.getElementsByTagName('p');
    Array.from(p)
        .sort((a, b) => a.textContent.localeCompare(b.textContent))
        .forEach(p => document.body.insertBefore(p, sort))
}

document.getElementById("sort").addEventListener('click', sortP)

  <div id="list">
      <div><p>foo</p> <span>lorem abc</span></div>
      <div><p>baz</p><span>lorem lorem abc</span></div>
      <div><p>bar</p><span>lorem lorem loremabc</span></div>

    </div>

<button id="sort">sort</button>

Результаты:

Lorem ABC

Lorem Lorem ABC

Lorem Lorem Lorem ABC

bar

baz

foo

Однако я бы хотел, чтобы они сортировались следующим образом

bar
lorem abc

baz
lorem lorem abc

foo
lorem lorem lorem abc

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

Answer 1

Вы почти правы в сравнении и сортировке, но вы должны выбрать весь блок для перемещения, т.е.Элемент селектора должен быть как <div><p>foo</p> <span>lorem abc</span></div>

function sortP() {
  let blocksList = document.body.querySelectorAll('#list > div');
  blocksList = Array.from(blocksList);

  blocksList.sort((a, b) => {
    return a.querySelector('p')
      .textContent.localeCompare(
        b.querySelector('p').textContent
      );
  })
  .forEach(p => document.body.insertBefore(p, sort));
}

document.getElementById("sort").addEventListener('click', sortP);

<div id="list">
      <div><p>foo</p> <span>lorem abc</span></div>
      <div><p>baz</p><span>lorem lorem abc</span></div>
      <div><p>bar</p><span>lorem lorem loremabc</span></div>

    </div>

<button id="sort">sort</button>

Answer 2

Получить элемент div вместо элемента p

function sortP() {
var p = document.body.getElementsByTagName('div');
    Array.from(p)
        .sort((a, b) => a.textContent.localeCompare(b.textContent))
        .forEach(p => document.body.insertBefore(p, sort))
}

document.getElementById("sort").addEventListener('click', sortP)

  <div id="list">
      <div><p>foo</p> <span>abc</span></div>
      <div><p>baz</p><span>abc</span></div>
      <div><p>bar</p><span>abc</span></div>

    </div>

<button id="sort">sort</button>