Displaying a random div by appendChild?

Question

In the Index file I have these divs which I note by IDs, let's say there are 3 of these:

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

And this is part of the JS file:

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

This if where I want that above div to be displayed:

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

If I press the button, I want one of the divs from the Index file displayed in the div on the page where this JS belongs, but I don't know how to append a whole div by an id.

Thank you for your insights in advance!

Possible duplicate of ["Cut and Paste" - moving nodes in the DOM with Javascript](https://stackoverflow.com/questions/324303/cut-and-paste-moving-nodes-in-the-dom-with-javascript) — Tibrogargan, Jul 13 '18 at 19:15
You could avoid creating your array of divs by hand simply by giving any div that should be a candidate for selection a known class, then use `document.getElementsByClassName` to get the collection of divs. Moving a div is trivial and explained in the potential dupe. — Tibrogargan, Jul 13 '18 at 19:17

score 0 · Answer 1 · answered Jul 13 '18 at 19:17

appendChild will work fine if you need to insert div into another one.

Suppose, there is <div id="one">One</div> which you want to append inside <div id="placeofresult"></div>; you need to do the following

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

or if you want to clone the div with id="one" and insert it, do the following:

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

Hope it helps. Revert for any doubts.

score 0 · Answer 2 · answered Jul 13 '18 at 19:46

A solution for your problem could be to write the three divs you want to display entirely into js like this:

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

Using your randomButton

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

You just have to set the innerHTML of your result div to the corresponding div of the divs array:

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

Another solution is to set the style of your divs to display none and display only the randomly chosen div after the button click:

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

Your Randomizer:

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

Displaying a random div by appendChild?

2 Answers2