<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0">
<
style
>
h1 {
color: green;
}
button {
color: green;
border-radius: 5px;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
hr
>
<
ul
id
=
"list"
>
<
li
class
=
"subject"
data-subject
=
"Operating systems"
>
Operating systems: Paging
</
li
>
<
li
class
=
"subject"
data-subject
=
"DBMS"
>
DBMS: E.R Modeling
</
li
>
<
li
class
=
"subject"
data-subject
=
"Operating systems"
>
Operating systems: Deadlock
</
li
>
<
li
class
=
"subject"
data-subject
=
"Data Structures"
>
Data Structures: Queue
</
li
>
<
li
class
=
"subject"
data-subject
=
"Data Structures"
>
Data Structures: Stack
</
li
>
<
li
class
=
"subject"
data-subject
=
"Data Structures"
>
Data Structures: Trees
</
li
>
<
li
class
=
"subject"
data-subject
=
"DBMS"
>DBMS: SQL</
li
>
<
li
class
=
"subject"
data-subject
=
"Data Structures"
>
Data Structures: Arrays
</
li
>
<
li
class
=
"subject"
data-subject
=
"Operating systems"
>
Operating systems: Segmentation
</
li
>
<
li
class
=
"subject"
data-subject
=
"DBMS"
>
DBMS: Queries
</
li
>
<
li
class
=
"subject"
data-subject
=
"DBMS"
>
DBMS: E.E.R Modeling
</
li
>
<
li
class
=
"subject"
data-subject
=
"Operating systems"
>
Operating systems: CPU scheduling
</
li
>
<
li
class
=
"subject"
data-subject
=
"DBMS"
>
DBMS: Normalization
</
li
>
<
li
class
=
"subject"
data-subject
=
"Data Structures"
>
Data Structures: Linked List
</
li
>
</
ul
>
<
button
onclick
=
"SortData()"
>
Sort HTML elements by Data Attributes
</
button
>
<
script
>
function comparator(a, b) {
if (a.dataset.subject <
b.dataset.subject
)
return -1;
if (a.dataset.subject > b.dataset.subject)
return 1;
return 0;
}
// Function to sort Data
function SortData() {
var subjects =
document.querySelectorAll("[data-subject]");
var subjectsArray = Array.from(subjects);
let sorted = subjectsArray.sort(comparator);
sorted.forEach(e =>
document.querySelector("#list").
appendChild(e));
}
</
script
>
</
body
>
</
html
>