How to use getElementById and innerHTML correctly (.append() )

Question

I am facing the following problem:

I have a form for user input that call up the function drawmycolor() when submitted. The function then gives out a talbe that displays the color generated through the numbers the user put in. All of that is working, the only problem is, that the table is not displayed on the website but in a new window. I have tried to work around this problem by opening a div-element in the html section and then refering to that div with getElementById and then putting the table with innerHTML into the div-Element. This is my code:

 function drawmycolor()
 {
 a = Number(document.color.d.value); //getting the user input from the form
 b = Number(document.color.e.value);
 c = Number(document.color.f.value);

 if (a >= 0 && a < 255 && Math.floor(a) == a &&
     b >= 0 && b < 255 && Math.floor(b) == b &&
     c >= 0 && c < 255 && Math.floor(c) == c)


    {
       mycolor = "#" + getHexadecimalValue(a) + 
        ""  + getHexadecimalValue(b) +
        ""  + getHexadecimalValue(c); 
 var div = document.getElementById('ausgabe');  //Here I am referencing the div-el.
 div.innerHTML = div.innerHTML + "...." //here i don't know how to put in the table below.
       document.write('<br><table border="1" cellspacing="1"cellpadding="1">');
       document.write('<tr><th>Hexadecimal Red</th><th>' +
       'Hexadecimal Green</th><th>' +
       'Hexadecimal Blue</th><th>' +
       'Color</th></tr>');
       document.write('<tr><td>' + getHexadecimalValue(a) + '</td><td>' + 
       getHexadecimalValue(b) + '</td><td>' + 
       getHexadecimalValue(c) +                            
       '</td><td bgcolor="mycolor"</td></tr>'); //RIGHT HERE I WANT TO SET THE COLOR
   document.write('</table>');
 }
 else
 ..

 <div id="ausgabe"><br> Blubb </div> //this is the div-element where the output is 
                                       supposed to be...

I would be grateful for any help with this problem - Thank you already in advance! :)

Answer 1

Each time you call document.write("something") it will over write the previous content by "something" . As pointed by Quentin either do this:

 var div = document.getElementById('ausgabe'); 



div.innerHTML="Your entire table related code here";

(No need of div.innerHTML=div.innerHTML+.... if you don't want previous content of that div).

Or you can do this(If you want to append a new div):

var dNew = document.createElement('div');
dNew.innerHTML="yolur table related content here"
document.getElementById('your outer div id here').appendChild(dNew);

Answer 2

Replace "..... // with the strings you are putting in document.write