# Сортировка DOM элементов на примере списка ul и таблицы

В данном уроке я покажу вам, как выполнить сортировку DOM элементов по их тексту. Решим задачу сначала на примере списка ul, а затем усложним ее и построим решение для сортировки HTML таблицы по заданной колонке.

## Исходники кода

`<ul id="list"> <li>5</li> <li>2</li> <li>1</li> <li>3</li> <li>4</li> </ul> <input type="submit" id="button">` `let list = document.querySelector('#list'); let items = document.querySelectorAll('#list li'); let button = document.querySelector('#button'); button.addEventListener('click', function() { let sorted = [...items].sort(function(a, b) { return a.innerHTML - b.innerHTML; }); list.innerHTML = ''; for (let li of sorted) { list.appendChild(li); } });`
`#table { width: 300px; } #table td { border: 1px solid black; }` `<table id="table"> <tr> <td>3</td> <td>b</td> </tr> <tr> <td>4</td> <td>a</td> </tr> <tr> <td>2</td> <td>e</td> </tr> <tr> <td>5</td> <td>d</td> </tr> <tr> <td>1</td> <td>c</td> </tr> </table> <input type="submit" id="button">` `let table = document.querySelector('#table'); let trs = document.querySelectorAll('#table tr'); let button = document.querySelector('#button'); button.addEventListener('click', function() { let sorted = [...trs].sort(function(a, b) { if (a.children[1].innerHTML >= b.children[1].innerHTML) { return 1; } else { return -1; } }); table.innerHTML = ''; for (let tr of sorted) { table.appendChild(tr); } });`
→
↑