title: Changing contents of div tag dynamically multiple times
body: <p>I have changed the contents of a <code>div</code> tag once using   </p>
  
  <pre><code>document.getElementById("di").innerHTML = content;   
  </code></pre>
  
  <p>In the changed content, I have a button which is calling a function, I want that function to change the contents of same <code>div</code> tag again to other. I have tried doing same i.e. by using   </p>
  
  <pre><code>document.getElementById("di").innerHTML = content2;
  </code></pre>
  
  <p>But it is not working. Can it be done using some other way, or what can be wrong in current method?</p>
  
  <pre><code>function change(){
      document.getElementById("di").innerHTML = "";
      var content = "&lt;span class='senr'&gt;&lt;input type='button' value='sender' onclick='sen()'&gt;&lt;/input&gt;&lt;/span&gt;";
      document.getElementById("di").innerHTML = content;
  }
  function sen(){
      document.getElementById("di").innerHTML = "";
      var content1="&lt;span class='prp'&gt;hello&lt;/span&gt;";
      document.getElementById("di").innerHTML = "content1";
  }
  
   &lt;div onclick="change()"&gt;welcome to page!&lt;/div&gt;
  </code></pre>