title: Add data from form field to table on page without refreshing whole page
body: <p>Most of the stuff I see on this site refers to adding information to a div from php.  I just want to take a user's input, add it to a table dynamically and have it displayed in the div as the click the submit button. </p>
  
  <p>I'm not doing anything where the data gets posted to a database, no php, etc, at this point. </p>
  
  <p>I have the JQuery to run the dynamic add to the database as well.  It works, but I have to use a breakpoint in the javascript to step through and see the entered data added to the row....issue is when that function is done, the page refreshes, and all data is gone.</p>
  
  <p>I need a way to add the data to the table in the div without the page refreshing and clearing all of the other data each time.</p>
  
  <p>Imagine parent information in one div, and child information being added in another div.  As I add each child piece, I don't want the parent information to be removed, and in fact want it to remain as "editable" information.</p>
  
  <p>------------------------------------------  Edit ----------------------------------------------<br>
  Below is the code I'm now using based on suggestions, but I obviously don't understand completely, because it hits the event handler for the click, but then doesn't get inside the function, just jumps back out, and never hits my other breakpoints inside there. </p>
  
  <p>---------------------------------------Final Edit ----------------------------------------------<br>
  I finally pulled my head out of my backside and paid attention to what Charlie was telling me, and got this...and it works when I call the function from the onClick event.  I couldn't get the event to bind to the button click, but that may be because I was using the  tag instead of the  setup.</p>
  
  <pre><code>function(addNoteRow){
              event.prevent.Default();
              var noteTxt = $('#noteEntry').val();
              var noteEntBy = 'BGM'
              noteEntDate = (Date());
              if (!document.getElementsByTagName) return;
              tabBody=document.getElementsByTagName("TBODY").item(0);
              row=document.createElement("TR");
              cell1=document.createElement("TD");
              cell2=document.createElement("TD");
              cell3=document.createElement("TD");
              textnode1=document.createTextNode(noteEntDate);
              textnode2=document.createTextNode(noteEntBy);
              textnode3=document.createTextNode(noteTxt);
              cell1.appendChild(textnode1);
              cell2.appendChild(textnode2);
              cell3.appendChild(textnode3);
              row.appendChild(cell1);
              row.appendChild(cell2);
              row.appendChild(cell3);
              tabBody.appendChild(row);
          }
  </code></pre>