title: Javascript : how to re-attach the same event listener to a element reppeared?
body: <p>In my code, I have a h1 container with h1 element inside like below : </p>
  
  <pre><code>&lt;div id="container_h1"&gt;&lt;h1 id="h1"&gt;Title H1&lt;/h1&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then, I attach an event listener to h1 element in order to alert h1 text when the user clicks on h1 element :</p>
  
  <pre><code>var h1 = document.getElementById("h1");
  h1.addEventListener(
                          "click", 
  
                          function()
                          {
                              alert(h1.innerHTML);
                          },
  
                          false                       
                      );
  </code></pre>
  
  <p>Then, I have 2 buttons for removing and inserting h1 element, like below : </p>
  
  <pre><code>&lt;input type="button" value="remove H1" onclick="remove_h1();"&gt;
  &lt;input type="button" value="insert H1" onclick="insert_h1();"&gt;
  
  //container_h1 element :
  var container_h1 = document.getElementById("container_h1"); 
  
  //Remove h1 :
  function remove_h1()
  {
      container_h1.innerHTML = "";    
  }
  
  //Re-appear h1 :
  function insert_h1()
  {
      container_h1.innerHTML = '&lt;h1 id="h1"&gt;Title H1&lt;/h1&gt;';   
  }
  </code></pre>
  
  <p>The problem : </p>
  
  <p>When I make disappear h1 element by clicking "remove H1" button then <strong>make reappear h1 element</strong> by clicking "insert H1" button, and then I click on h1 element, <strong>h1.addEventListerner in the code has no effect, no alert is triggered</strong>.</p>
  
  <p>So how can I re-attach the same event listener to h1 element when this h1 element reappears ?</p>
  
  <p>Thank you.</p>