CODEWITHSUNDEEP
javascriptjquery
Ricky
Ricky

Reputation: 498

dynamically Re-arrange order of div using javascript only

I am stuck in a problem where I have to re-arrange div's inside a div.

This html is in ajax response. There are accordions inside div with IDs like accordion 0 accordion 1 ,.... accordion 4.

How can I re-arrange these divs using javascript?

function GetHtmlUsingAjax() {
  fetch(url)
    .then((response) => {
      return response.text();
    })
    .then((result) => { // result here contains the html given above
      //how can i re-arrange their order using javascript as div0,1,2,3..
    });
}
<div id="maindiv">
  <div id="sudiv0">
    <div id="accordion0">
    </div>
  </div>
  <div id="sudiv2">
    <div id="accordion2">
    </div>
  </div>
  <div id="sudiv1">
    <div id="accordion1">
    </div>
  </div>
  <div id="sudiv3">
    <div id="accordion3">
    </div>
  </div>
</div>

Upvotes: 0

Views: 121

Answers (1)

mplungjan
mplungjan

Reputation: 177940

Like this

PS DIVs do not have values

const container = document.getElementById("container"); // or use a fragment
// container.innerHTML = response.text();
// demo string, remove when using the response
container.innerHTML = `<div id="maindiv">
  <div id="sudiv0">
    <div id="accordion0">accordion 0</div>
  </div>
  <div id="sudiv2">
    <div id="accordion2">accordion 2</div>
  </div>
  <div id="sudiv1">
    <div id="accordion1">accordion 1</div>
  </div>
  <div id="sudiv3">
    <div id="accordion3">accordion 3</div>
  </div>
</div>`

const main = document.getElementById("maindiv");
[...document.querySelectorAll("[id^=sudiv]")]
  .sort((a,b) => a.id.replace("sudiv","") - b.id.replace("sudiv",""))
  .forEach(div => main.appendChild(div))
<div id="container"></div>

Upvotes: 1

Related Questions