title: How can I display a Javascript function in a DIV Tag?
body: <p>I've created a FizzBuzz Program and now I just want to display that in a div when a button is clicked.</p>
  
  <p>I've created a function which will show the div when the button is clicked. (fizzbuzzButton)</p>
  
  <p>All I want it to do is display the result of the FizzBuzz Function in the Div.</p>
  
  <p>Is there not a simple way to display the result of a function in a div?
  Or despite that, show the result of a function after clicking a button?</p>
  
  <p>I can get it to display when clicking a button using:</p>
  
  <pre><code>&lt;button onclick="FizzBuzz()"&gt;Show FizzBuzz&lt;/button&gt;
  </code></pre>
  
  <p>But when using document.write, this removes the rest of the HTML.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DocType html&gt;
  &lt;html&gt;
      &lt;body&gt;
  
  &lt;script type= text/javascript&gt;
  var max = 100;
  
  var fizz = "Fizz!";
  var buzz = "Buzz!";
  var fizzbuzz = "FizzBuzz!";
  
  function FizzBuzz() {
  for(var x = (1); x &lt;= max; x++) {
      if(x % 5 == 0 &amp;&amp; x % 3 == 0){
         document.write(fizzbuzz, "&lt;/br&gt;" )
      }
      else if(x % 3 == 0) {
          document.write(fizz, "&lt;/br&gt;")
      }
      else if(x % 5 == 0) {
          document.write(buzz, "&lt;/br&gt;")
      }
      else {
          document.write(x, "&lt;/br&gt;")
      }   
  }
  
  }
  
   function fizzbuzzButton() {
      document.getElementById('resultDIV').innerHTML = FizzBuzz;
  }
  
  &lt;/script&gt;
  
  &lt;h1&gt;FIZZ BUZZ!&lt;/h1&gt;
  &lt;button onclick="fizzbuzzButton()"&gt;Show FizzBuzz&lt;/button&gt;
  &lt;div id="resultDIV"&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>