Dada una lista de elementos y la tarea es ordenarlos alfabéticamente y colocar cada elemento en la lista con la ayuda de JavaScript.
Método insertBefore(): El método insertBefore() en HTML DOM se usa para insertar un nuevo Node antes del Node existente según lo especificado por el usuario.
Sintaxis:
node.insertBefore( newnode, existingnode )
Parámetros: Este método acepta dos parámetros como se mencionó anteriormente y se describe a continuación:
- newnode: Es el parámetro requerido. Este parámetro contiene el nuevo objeto de Node que debe insertarse.
- Nodeexistente: Es el parámetro requerido. Describe la posición donde se inserta el nuevo Node antes de este Node. Si se establece en nulo, el método insertBefore insertará el nuevo Node al final.
Ejemplo: En este ejemplo, los elementos de la lista se seleccionan y luego se pasan a una función para ordenarlos. Después de ordenarlos, se agregan al elemento principal utilizando el método insertBefore() de manera ordenada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Sort a list alphabetically Using JavaScript
</title>
<script>
function sort() {
// Declaring Variables
var geek_list, i, run, li, stop;
// Taking content of list as input
geek_list = document.getElementById("GeekList");
run = true;
while (run) {
run = false;
li = geek_list.getElementsByTagName("LI");
// Loop traversing through all the list items
for (i = 0; i < (li.length - 1); i++) {
stop = false;
if (li[i].innerHTML.toLowerCase() >
li[i + 1].innerHTML.toLowerCase()) {
stop = true;
break;
}
}
/* If the current item is smaller than
the next item then adding it after
it using insertBefore() method */
if (stop) {
li[i].parentNode.insertBefore(
li[i + 1], li[i]);
run = true;
}
}
}
</script>
</head>
<body>
<h1 style="text-align:center;
color: forestgreen;">
GeeksForGeeks
</h1>
<p style="text-align:center; font-size: 15px;
font-weight: bold;">
Click on the button to sort the list
</p>
<ul style="color: crimson;" id="GeekList">
<li>Geeks</li>
<li>For</li>
<li>GFG</li>
<li>GeeksForGeeks</li>
</ul>
<br>
<center>
<button style="color: crimson;"
onclick="sort()">
Click Here To Sort
</button>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA