Show all DOM nodes in html div

I want to show all the nodes of my html page inside a div.

What i have so far (js):

var nodes = document.getElementsByTagName("*");
div3.innerHTML = nodes;

And html:

<body>
  <div id="content">
    <div id="1-1">
      <div id="div1"></div><br>
      <div id="div2"></div><br>
      <div id="div3"></div><br>
      <div id="div4"></div><br>
      <div id="div5"></div>
    </div>
  </div>

  <script src="script201.js" rel="text/javascript"></script>

</body>

The output I get from this code in div3: [object HTMLCollection] How do I get all the nodes to show like:

BODY
DIV
DIV
DIV
DIV
DIV
DIV
DIV
SCRIPT

So every node in the file basically

Solution

You have to loop through all the nodes so that you get the nodeName property individually.

Please Note: Since document object has some other tags like HTML, HEAD, STLYLE, SCRIPT etc., all of them will be targeted with * selector.

var nodes = [...document.getElementsByTagName("*")];
nodes.forEach(function(el){
  div3.innerHTML += el.nodeName + ' ';
})

<body>
  <div id="content">
    <div id="1-1">
        <div id="div1"></div><br>
        <div id="div2"></div><br>
        <div id="div3"></div><br>
        <div id="div4"></div><br>
        <div id="div5"></div>
    </div>
  </div>

  <script src="script201.js" rel="text/javascript"></script>

</body>