How can I add a row to a table in Javascript without it immediately resetting?
<p>I am trying to learn JavaScript, but I'm struggling with a very simple example.  </p>

<p>I have a form and I want to add its contents to a new table row in "catalog" every time the user hits submit. </p>

<p>But when I hit submit using the code below, I see the new table row flash briefly and then disappear, as if the page is being reset. </p>

<p>When I use the commented out code instead (just appending the form contents to body.innerHTML), it works fine.  </p>

<p>What am I doing wrong?</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4   /loose.dtd"&gt; 
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Javascript test&lt;/title&gt;
&lt;/head&gt;

&lt;script type="text/javascript"&gt;
function addItem() {
    var itemName = document.getElementById('item_name').value;      
    var itemPrice = document.getElementById('item_price').value;

    var newRow = document.createElement('tr');
    //var body = document.getElementById('body');
   //body.innerHTML += itemName;    
   newRow.innerHTML = "&lt;td&gt;" + itemName + "&lt;/td&gt;&lt;td&gt;" + itemPrice + "&lt;/td&gt;";
   var catalog = document.getElementById('catalog');
   catalog.appendChild(newRow);
}

&lt;/script&gt;

&lt;body id="body"&gt; 
 &lt;form&gt;&lt;h2&gt;Add an Item to the Catalog&lt;/h2&gt;

&lt;p&gt;Item Name: &lt;input type="text" id="item_name" value="" /&gt; Price: &lt;input type="text"    id="item_price" value="" /&gt;&lt;/p&gt;

&lt;input type="submit" onClick="addItem()" value="Add" id="submit" /&gt;
&lt;input type="reset" id="reset" /&gt;
&lt;/form&gt;

&lt;table id="catalog"&gt;&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
