Question

在索引文件中，有这些div，我通过ID进行了标注，假设其中有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>

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

谢谢您的见解！

Answer 1

如果您需要将div插入另一个，则

appendChild可以正常工作。

假设您要在<div id="one">One</div>内附加<div id="placeofresult"></div>；您需要执行以下操作

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

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

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

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

Answer 2

针对您的问题的解决方案可能是将要显示的三个div完全写成js：

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

使用您的randomButton

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

通过appendChild显示随机div？

2 个答案: