Javascript 是否按子项显示随机div？

在索引文件中，我用ID记录了这些div，假设其中有3个：

<div class="col-sm-6 col-md-4 col-lg-3 grid-item" id="one">
    <div class="well">
        <a href="http://" target="_blank">
            <img class="class" src="img/pic.jpg" alt=""/>
        </a>
        <p></p>
        <nav>
            <div class="anim-icons">
                <ul>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

如果我希望上面的div显示在以下位置：

<div>
    <button class="btn btn-light" id="randomButton">
        press!
    </button>
    <br>
    <div id="placeofresult"> </div>
</div>

按

如果我按下这个按钮，我想要这个JS所属页面上div中显示的索引文件中的一个div，但是我不知道如何通过id附加整个div

---

提前感谢您的见解

appendChild

如果需要将div插入到另一个文件中，则可以正常工作

假设在

中有一个

要追加；您需要执行以下操作

document.getElementById("placeofresult").appendChild(document.getElementById("one"));

或者，如果要克隆id=“one”的div并将其插入，请执行以下操作：

const newOne = document.getElementById("one").cloneNode(true);
document.getElementById("placeofresult").appendChild(newOne);

希望能有帮助。如果有任何疑问，请回复。
解决问题的方法是将要显示的三个div全部写入js，如下所示：

const divs = [
  "
  <div id="one">
    ...
  </div>
  ",
  "<div id="two">
    ...
  </div>
  ",
  "<div id="three">
    ...
  </div>
  "
]

只需将结果div的innerHTML设置为divs数组的相应div：

function Randomizer() { 
  var resultHTML = divs[Math.floor(Math.random() * array.length)];
  document.getElementById("#placeofresult").innerHTML(resultHTML); 
}

另一种解决方案是将div的样式设置为“无”，并在单击按钮后仅显示随机选择的div：

您的html：

<div id="placeofresult">
  <div id="one" style="display:none">
    ...
  </div>
  <div id="two" style="display:none">
    ...
  </div>
  <div id="three" style="display:none">
    ...
  </div>
</div>

可能的重复可以避免手动创建div数组，只需将任何应作为候选的div指定为已知类，然后使用
document.getElementsByClassName
获取div集合。移动div很简单，这在潜在的dupe中得到了解释。
function Randomizer() { 
  var resultHTML = divs[Math.floor(Math.random() * array.length)];
  document.getElementById("#placeofresult").innerHTML(resultHTML); 
}

<div id="placeofresult">
  <div id="one" style="display:none">
    ...
  </div>
  <div id="two" style="display:none">
    ...
  </div>
  <div id="three" style="display:none">
    ...
  </div>
</div>

function Randomizer() {
  var array = [one, two, three];
  // Set all divs to hidden
  array.forEach(function(id){
    document.getElementById(id).style.display = "none";
  })
  var result = array[Math.floor(Math.random() * array.length)];
  document.getElementById(result).style.display = "block";
}