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  id="child2" data-name="1">1</div>
    <div  id="child4" data-name="2">2</div>
    <div  id="child1" data-name="3">3</div>
    <div  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  id="child1" data-name="3">3</div>
    <div  id="child2" data-name="1">1</div>
    <div  id="child3" data-name="4">4</div>
    <div  id="child4" data-name="2">2</div>
</div>

<div id="parent-sort">
</div>

<button onclick="myFunction()">Click me</button>

CodePudding user response：

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  id="child1" data-name="3">3</div>
  <div  id="child2" data-name="1">1</div>
  <div  id="child3" data-name="4">4</div>
  <div  id="child4" data-name="2">2</div>
</div>

<div id="parent-sort">
</div>

<button onclick="myFunction()">Click me</button>