Để sắp xếp danh sách HTML bằng JavaScript, mã như sau:
Ví dụ
<!DOCTYPE html> <html> <body> <h1>Ví dụ sắp xếp danh sách</h1> <button>Nhấn để sắp xếp</button> <ul class="animalList"> <li>Hươu cao cổ</li> <li>Lạc đà</li> <li>Chó</li> <li>Sư tử</li> <li>Báo</li> <li>Mèo</li> </ul> <script> document .getElementsByTagName("button")[0] .addEventListener("click", sortList); function sortList() { var list, i, sortFlag, LiEle, sorted; list = document.querySelector(".animalList"); sortFlag = true; while (sortFlag) { sortFlag = false; LiEle = list.getElementsByTagName("LI"); for (i = 0; i < LiEle.length - 1; i++) { sorted = false; if ( LiEle[i].innerHTML.toLowerCase() > LiEle[i + 1].innerHTML.toLowerCase() ) { sorted = true; break; } } if (sorted) { LiEle[i].parentNode.insertBefore(LiEle[i + 1], LiEle[i]); sortFlag = true; } } } </script> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả sau:
Khi nhấn nút "Nhấn để sắp xếp":
