title: How do I use just JavaScript to create HTML code?
body: <p>I've been trying to use pure JavaScript (<strong>no jQuery</strong>) to recreate HTML content within the container. But, nothing shows up on the webpage when I run. I did a lot of research online, but still no luck. Could anyone help me to take a look?</p>
  
  <p>p.s. Sorry about my code is long and messy. If you could help me point out which part of function or format I did wrong and tell me the correct way that would be great! Thank you!</p>
  
  <p>Here is the original code I am trying to duplicate:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;h3&gt;Nothing clicked yet!&lt;/h3&gt;
        &lt;button type="button" class="btn btn-default btn-lg"&gt;Star&lt;/button&gt;
        &lt;hr&gt;
        &lt;div&gt;
          &lt;div class="btn-group"&gt;
            &lt;button type="button" class="btn btn-default"&gt;1&lt;/button&gt;
            &lt;button type="button" class="btn btn-default"&gt;2&lt;/button&gt;
            &lt;button type="button" class="btn btn-default"&gt;3&lt;/button&gt;
            &lt;button type="button" class="btn btn-default"&gt;4&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="btn-group"&gt;
            &lt;button type="button" class="btn btn-default"&gt;5&lt;/button&gt;
            &lt;button type="button" class="btn btn-default"&gt;6&lt;/button&gt;
            &lt;button type="button" class="btn btn-default"&gt;7&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="btn-group"&gt;
            &lt;button type="button" class="btn btn-default"&gt;8&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;hr&gt;
        &lt;div&gt;
          &lt;div class="btn-group btn-group-lg"&gt;
            &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
            &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
            &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is what I have so far:</p>
  
  <pre class="lang-js prettyprint-override"><code>function myFunction() {
    var makeDiv = document.createElement('DIV');
    var makeHead = document.createElement('H3');
    var makeBTN = document.createElement('BUTTON');
  
    var swapH3 = function swap() {
        //locate button textNode then use it to replace the text inside of h3;
    };
  
    var rowDiv = document.getElementById("container").appendChild("makeDiv");
    rowDiv.className = "row";
    rowDiv.id = "row";
  
    var colDiv = document.getElementById('row').appendChild('makeDiv');
    colDiv.className = "col-md-12";
    colDiv.id = "col";
  
    var head = document.getElementById('col').appendChild('makeHead');
    head.id = "head";
    head.createTextNode('Nothing clicked Yet!');
  
    var btn0 = document.getElementById('col').appendChild('makeBTN');
    btn0.id = "btn0";
    btn0.className = "btn btn-default btn-lg on";
    btn0.createTextNode = ('star');
    btn0.type = "button";
    btn0.onclick = swapH3;
  
    document.getElementById('col').appendChild(document.createElement(HR));
  
    var btng1 = document.getElementById('col').appendChild('makeDIV');
    btng1.id = 'btng1';
  
    document.getElementById('col').appendChild(document.createElement(HR));
  
    var btng2 = document.getElementById('col').appendChild('makeDIV');
    btng2.id = 'btng2';
  
    var btngA = document.getElementById('btng1').appendChild('makeDIV');
    btngA.id = 'btngA';
    btngA.className = 'btn-group';
  
    var btngB = document.getElementById('btng1').appendChild('makeDIV');
    btngB.id = 'btngB';
    btngB.className = 'btn-group';
  
    var btngC = document.getElementById('btng1').appendChild('makeDIV');
    btngC.id = 'btngC';
    btngC.className = 'btn-group';
  
    var btngD = document.getElementById('btng2').appendChild('makeDIV');
    btngD.id = 'btngD';
    btngD.className = 'btn-group btn-group-lg';
  
    var btn1 = document.getElementById('btngA').appendChild('makeBTN');
    btn1.className = 'btn btn-default';
    btn1.type = 'button';
    btn1.createTextNode = ('1');
    btn1.onclick = swapH3;
  
    var btn2 = document.getElementById('btngA').appendChild('makeBTN');
    btn2.className = 'btn btn-default';
    btn2.type = 'button';
    btn2.createTextNode = ('2');
    btn2.onclick = swapH3;
  
    var btn3 = document.getElementById('btngA').appendChild('makeBTN');
    btn3.className = 'btn btn-default';
    btn3.type = 'button';
    btn3.createTextNode = ('3');
    btn3.onclick = swapH3;
  
    var btn4 = document.getElementById('btngA').appendChild('makeBTN');
    btn4.className = 'btn btn-default';
    btn4.type = 'button';
    btn4.createTextNode = ('4');
    btn4.onclick = swapH3;
  
    var btn5 = document.getElementById('btngB').appendChild('makeBTN');
    btn5.className = 'btn btn-default';
    btn5.type = 'button';
    btn5.createTextNode = ('5');
    btn5.onclick = swapH3;
  
    var btn6 = document.getElementById('btngB').appendChild('makeBTN');
    btn6.className = 'btn btn-default';
    btn6.type = 'button';
    btn6.createTextNode = ('6');
    btn6.onclick = swapH3;
  
    var btn7 = document.getElementById('btngB').appendChild('makeBTN');
    btn7.className = 'btn btn-default';
    btn7.type = 'button';
    btn7.createTextNode = ('7');
    btn7.onclick = swapH3;
  
    var btn8 = document.getElementById('btngC').appendChild('makeBTN');
    btn8.className = 'btn btn-default';
    btn8.type = 'button';
    btn8.createTextNode = ('8');
    btn8.onclick = swapH3;
  
    var btnLeft = document.getElementById('btngD').appendChild('makeBTN');
    btnLeft.className = 'btn btn-default';
    btnLeft.type = 'button';
    btnLeft.createTextNode = ('Left');
    btnLeft.onclick = swapH3;
  
    var btnMiddle = document.getElementById('btngD').appendChild('makeBTN');
    btnMiddle.className = 'btn btn-default';
    btnMiddle.type = 'button';
    btnMiddle.createTextNode = ('Middle');
    btnMiddle.onclick = swapH3;
  
    var btnRight = document.getElementById('btngD').appendChild('makeBTN');
    btnRight.className = 'btn btn-default';
    btnRight.type = 'button';
    btnRight.createTextNode = ('Right');
    btnRight.onclick = swapH3;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="container" id="container"&gt;
  &lt;/div&gt;
  </code></pre>