Сортировка 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);
	}
});