将html元素转换为javascript数组，然后将其打印回页面

Question

我的HTML页面中有一些<div>个元素，我已将其转换为javascript数组。

我已将数组随机化，现在我需要将其打印回页面。我怎么能这样做？
这是代码

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在页面上显示randFields，给我回复24 [object HTMLDivElement]。

Answer 1

要显示DOM中随机重新排序的div，您需要在其父级上调用appendChild()并将元素引用作为参数传递。您可以在forEach()调用产生的数组sort()循环中实现此目的，如下所示：

＆＃13;

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一旦你的div的数组被随机化，我将逐一打印到elem中的每一个.row

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

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

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

<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:

＆＃13;

＆＃13;

＆＃13;