Converting html elements to an javascript array and then printing them back on the page

Question

I have a few <div> elements in my HTML page that I've converted into a javascript array.

I've randomized the array and now I need to print it back on the page. How can I do that?
Here's the code

let fields = document.getElementsByClassName('col-md-2')
let fieldsArr = Array.from(fields);
let randFields = fieldsArr.sort(function() {
  return 0.5 - Math.random()
});

<div class="row">
  <div class="col-md-2" id="1">1</div>
  <div class="col-md-2" id="2">2</div>
  <div class="col-md-2" id="3">3</div>
  <div class="col-md-2" id="4">4</div>
  <div class="col-md-2" id="5">5</div>
  <div class="col-md-2" id="6">6</div>
  <div class="col-md-2" id="7">7</div>
  <div class="col-md-2" id="8">8</div>
  <div class="col-md-2" id="9">9</div>
  <div class="col-md-2" id="10">10</div>
  <div class="col-md-2" id="11">11</div>
  <div class="col-md-2" id="12">12</div>
  <div class="col-md-2" id="13">13</div>
  <div class="col-md-2" id="14">14</div>
  <div class="col-md-2" id="15">15</div>
  <div class="col-md-2" id="16">16</div>
  <div class="col-md-2" id="17">17</div>
  <div class="col-md-2" id="18">18</div>
  <div class="col-md-2" id="19">19</div>
  <div class="col-md-2" id="20">20</div>
  <div class="col-md-2" id="21">21</div>
  <div class="col-md-2" id="22">22</div>
  <div class="col-md-2" id="23">23</div>
  <div class="col-md-2" id="24">24</div>
</div>

Displaying randFields on the page, gives me back 24 [object HTMLDivElement].

You can't print directly an item from your HTMLCollection. Use appendChild(); — Bibimission
– Bibimission, Commented May 17, 2018 at 12:26
I have another div with an id of " show". I've tried doing this: document.getElementById('show').innerHTML = randFields — RonyD Kid
– RonyD Kid, Commented May 17, 2018 at 12:27
I've tried the appendChild method and it just gives me back an error: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. — RonyD Kid
– RonyD Kid, Commented May 17, 2018 at 12:28
So you want to keep the original elements and show also them in a new order? — Teemu
– Teemu, Commented May 17, 2018 at 12:28

Rory McCrossan · Accepted Answer · 2018-05-17 12:30:11Z

3

To show the randomly re-ordered divs in the DOM you need to call appendChild() on their parent and pass the element reference as an argument. You can achieve that in a forEach() loop over the array resulting from the sort() call, like this:

let row = document.querySelector('.row');
let fields = document.getElementsByClassName('col-md-2')
let fieldsArr = Array.from(fields);

fieldsArr.sort(function() {
  return 0.5 - Math.random();
}).forEach(function(el) {
  row.appendChild(el);
});

<div class="row">
  <div class="col-md-2" id="1">1</div>
  <div class="col-md-2" id="2">2</div>
  <div class="col-md-2" id="3">3</div>
  <div class="col-md-2" id="4">4</div>
  <div class="col-md-2" id="5">5</div>
  <div class="col-md-2" id="6">6</div>
  <div class="col-md-2" id="7">7</div>
  <div class="col-md-2" id="8">8</div>
  <div class="col-md-2" id="9">9</div>
  <div class="col-md-2" id="10">10</div>
  <div class="col-md-2" id="11">11</div>
  <div class="col-md-2" id="12">12</div>
  <div class="col-md-2" id="13">13</div>
  <div class="col-md-2" id="14">14</div>
  <div class="col-md-2" id="15">15</div>
  <div class="col-md-2" id="16">16</div>
  <div class="col-md-2" id="17">17</div>
  <div class="col-md-2" id="18">18</div>
  <div class="col-md-2" id="19">19</div>
  <div class="col-md-2" id="20">20</div>
  <div class="col-md-2" id="21">21</div>
  <div class="col-md-2" id="22">22</div>
  <div class="col-md-2" id="23">23</div>
  <div class="col-md-2" id="24">24</div>
</div>

answered May 17, 2018 at 12:30

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RonyD Kid Over a year ago

You're a life saver! Thanks mate! :)

Rory McCrossan Over a year ago

No problem, glad to help

Bhavik Hirani · Accepted Answer · 2018-05-17 12:37:18Z

let fields = document.getElementsByClassName('col-md-2')
let fieldsArr = Array.from(fields);
let randFields = fieldsArr.sort(function() {
  return 0.5 - Math.random()
});
html = '';
for(i in randFields){
    html += randFields[i].outerHTML;
}
document.getElementsByClassName('row')[0].outerHTML = html

<div class="row">
  <div class="col-md-2" id="1">1</div>
  <div class="col-md-2" id="2">2</div>
  <div class="col-md-2" id="3">3</div>
  <div class="col-md-2" id="4">4</div>
  <div class="col-md-2" id="5">5</div>
  <div class="col-md-2" id="6">6</div>
  <div class="col-md-2" id="7">7</div>
  <div class="col-md-2" id="8">8</div>
  <div class="col-md-2" id="9">9</div>
  <div class="col-md-2" id="10">10</div>
  <div class="col-md-2" id="11">11</div>
  <div class="col-md-2" id="12">12</div>
  <div class="col-md-2" id="13">13</div>
  <div class="col-md-2" id="14">14</div>
  <div class="col-md-2" id="15">15</div>
  <div class="col-md-2" id="16">16</div>
  <div class="col-md-2" id="17">17</div>
  <div class="col-md-2" id="18">18</div>
  <div class="col-md-2" id="19">19</div>
  <div class="col-md-2" id="20">20</div>
  <div class="col-md-2" id="21">21</div>
  <div class="col-md-2" id="22">22</div>
  <div class="col-md-2" id="23">23</div>
  <div class="col-md-2" id="24">24</div>
</div>

And JavaScript:

David C. · Accepted Answer · 2018-05-17 12:41:56Z

1

Once you have an array of your divs randomized, I will just print each of them one by one to elem with class of .row

let container = document.getElementsByClassName('row')[0].innerHTML = '';

randFields.forEach( elem =>  {
  container.innerHTML += elem;
});

edited May 17, 2018 at 12:41

answered May 17, 2018 at 12:36

David C.

2012 silver badges11 bronze badges

Collectives™ on Stack Overflow

Converting html elements to an javascript array and then printing them back on the page

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related