How do I create new elements and sort order by numbers from "data-number"? Any idea how to do it? I found a sort method with, but how to insert in for loop?
The result in "parent-sort" should look like:
<div id="parent-sort">
<div class="child" id="child2" data-name="1">1</div>
<div class="child" id="child4" data-name="2">2</div>
<div class="child" id="child1" data-name="3">3</div>
<div class="child" id="child3" data-name="4">4</div>
</div>
Code:
function myFunction() {
elementsort = document.getElementById("parent").children;
for (i = 0; i < elementsort.length; i++) {
var element_id = elementsort[i].id;
var element_class_name = elementsort[i].className;
var element_inner_html = elementsort[i].innerHTML;
var data_name = elementsort[i].getAttribute("data-name");
const new_div = document.createElement("div");
new_div.id = element_id;
new_div.className = element_class_name;
new_div.innerText = element_inner_html;
new_div.setAttribute("data-name", data_name);
document.getElementById("parent-sort").appendChild(new_div);
}
}<div id="parent">
<div class="child" id="child1" data-name="3">3</div>
<div class="child" id="child2" data-name="1">1</div>
<div class="child" id="child3" data-name="4">4</div>
<div class="child" id="child4" data-name="2">2</div>
</div>
<div id="parent-sort">
</div>
<button onclick="myFunction()">Click me</button>You can use the following code:
function myFunction() {
elementsort = document.getElementById("parent").children;
const sortedList = [...elementsort].sort((a, b) => {
const c = a.textContent,
d = b.textContent;
return c < d ? -1 : c > d ? 1 : 0;
});
for (const item of sortedList) {
document.getElementById("parent-sort").appendChild(item);
}
}<div id="parent">
<div class="child" id="child1" data-name="3">3</div>
<div class="child" id="child2" data-name="1">1</div>
<div class="child" id="child3" data-name="4">4</div>
<div class="child" id="child4" data-name="2">2</div>
</div>
<div id="parent-sort">
</div>
<button onclick="myFunction()">Click me</button>