Q:

Is there a way to do this in JS? Instead of having to add each individual html element

I have an html page that holds an empty div:
<html>
    <div id="HARBOURPAGE">
    </div>
<html>

I would like to append the following "grouped" html elements below using ONE JS expression inside hallTheme() function.
All the html code below I'd like to append to the "HARBOURPAGE" div in one JS function call:
<html>

<div id="mainDIV">
   <div id="div1">
   </div>
   <div id="div2">
   </div>
</div>

</html>

 The Javascript
    function hallTheme(){
var newDiv = document.createElement("div");

var node = document.createNode('div id="mobileHeader" style="position:relative;height:50px;width:100%;background-color:skyblue;">h2 id="heading" style="display: inline;padding-top: 10px;padding-left:5px;font-size: 18px;font-weight: 500;width: auto;font-family: "Lato",sans-serif;"color: #666;position: relative;top: 15px;">Example Title/h2>/div><!-- end header-->div id="mobileIntro" style="position:relative;height:115px;width:100%;text-align: center;display: inline-block;display: inline-block;">h3>About us/h3><p id="para" style="display:inline;font-size:14px;font-weight:500;width:auto;font-family: "Lato",sans-serif;color: #666;>Welcome to harbour!br>Browser our docks belowbr>Feel free to ask for anything/p>/div><!-- mobileBody -->div id="mobileInfo" style="position:relative;height:140px;width:100%;background-color:lightblue;text-align: center;">h3>Essentials/h3>p id="info">Useful information:br>bla bla br>/p>/div><!-- mobileBody -->"');

newDiv.appendChild(node);

var element = document.getElementById("HARBOURPAGE");
element.appendChild(newDiv);

}

A:

After understanding the question, edited the code 
<html>
    <div class="HARBOURPAGE"></div>
<html>

function hallTheme(){
   document.getElementById("HARBOURPAGE").innerHTML = document.getElementById("mainDIV").outerHTML;
}

