通过 appendChild 显示随机 div？答案

【问题标题】：Displaying a random div by appendChild?通过 appendChild 显示随机 div？
【发布时间】：2018-07-13 19:02:14
【问题描述】：

在索引文件中，我有这些我用 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>

这是 JS 文件的一部分：

var one = document.querySelector("#one");
var two = document.querySelector("#two");
var three= document.querySelector("#three");

const randomButton= document.querySelector("#randomButton");

function Randomizer() { 
    var array = [one, two, three];  

    var result = array[Math.floor(Math.random() * array.length)];
    console.log(result);
    var node = document.createElement("DIV");
    node.innerHTML(result);
    node.appendChild(result);
    document.getElementById("#placeofresult").appendChild(node); 
}

randomButton.addEventListener("click", Randomizer, false);

如果我希望上面的 div 显示在哪里：

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

如果我按下按钮，我希望索引文件中的一个 div 显示在该 JS 所属页面上的 div 中，但我不知道如何通过 id 附加整个 div。

提前感谢您的见解！

【问题讨论】：

"Cut and Paste" - moving nodes in the DOM with Javascript的可能重复
你可以避免手动创建你的 div 数组，只需给任何应该作为候选的 div 一个已知的类，然后使用document.getElementsByClassName 来获取 div 的集合。移动一个 div 是微不足道的，并在潜在的欺骗中进行了解释。

标签： javascript html append addeventlistener appendchild

【解决方案1】：

appendChild 如果您需要将 div 插入另一个，则可以正常工作。

假设，你想在<div id="placeofresult"></div> 中附加一个<div id="one">One</div>；您需要执行以下操作

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

或者如果您想克隆 id="one" 的 div 并插入它，请执行以下操作：

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

希望对您有所帮助。如有任何疑问，请回复。

【讨论】：

【解决方案2】：

解决您的问题的方法可能是将您想要完全显示的三个 div 写入 js，如下所示：

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

使用你的随机按钮

randomButton.addEventListener("click", Randomizer, false);

您只需将结果 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>

你的随机化器：

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

【讨论】：