title: pure javascript dom dynamic insert, update and delete
body: <p>I want to know the most effctive way to dynamically update, insert or remove elements from an html page.</p>
  
  <p>The outcome of this is that, I can change an input element into a div element and vice versa based on a user action.</p>
  
  <p>eg</p>
  
  <pre><code>&lt;form&gt;&lt;input type="text" value="Value to save"/&gt;&lt;/form&gt;
  </code></pre>
  
  <p>and based on some event, i will change that to</p>
  
  <pre><code>&lt;form&gt;&lt;div&gt;Value to Save&lt;/div&gt;&lt;/form&gt;
  </code></pre>
  
  <p>Tx</p>