title: How do I add something to my html using javascript without erasing the whole page
body: <p>I have a small calculator that I'm adding to my html. It has a few dropdowns to select stuff and when a person hits a submit button, I'd like to display a picture below the calculator in my html. I've tried using a javascript function with: document.write() but that clears the whole page. Is there a way that I can get a javascript function to run which only adds a picture to my page when a submit button is clicked?</p>
  
  <p>Here's a BASIC outline of my code with the part I'm having trouble with:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  
  function calc_rate() {
  
      //code that displays a message after the submit button is hit        
      document.write("answer");
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;table&gt;
  
  
  &lt;tr&gt;
      &lt;td class=rate_calc_label&gt;Select Your Option Type:&lt;/td&gt;
  &lt;td&gt;&lt;select name="type1"&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;
  &lt;/tr&gt;  
  
  
  &lt;tr&gt;
  &lt;td class=rate_calc_label&gt;Select The Second Number:&lt;/td&gt;
  &lt;td&gt;&lt;select name="type2"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
      &lt;option&gt;6&lt;/option&gt;
      &lt;option&gt;7&lt;/option&gt;
      &lt;option&gt;8&lt;/option&gt;
      &lt;option&gt;9&lt;/option&gt;
      &lt;option&gt;9&lt;/option&gt;
      &lt;option&gt;10&lt;/option&gt;
      &lt;option&gt;11&lt;/option&gt;
      &lt;option&gt;12&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="submit" value="Submit" name="calc_button" onclick="calc_rate()"/&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;    
  
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>would it be possible to use some kind of inner-HTML? That's what I got from others on stockoverflow but I'm still a little confused</p>