title: Cannot use addEventListener() on a createElement() (a button) after displaying it in the DOM (in javascript)
body: <p>I am creating a Javascript framework recently and I am facing two problems that I don't understand at all. When I create a new button with <code>createElement()</code> in Javascript, I can't place it inside several elements at the same time without killing the &quot;click&quot; event (if this is an <code>id</code>, it works).</p>
  <p>(Note : <code>&quot;button.onclick = function()&quot;</code> doesn't work either)</p>
  <p>Here is the code : (I don't want to use any libraries)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function createButton() {
      var button = document.createElement("button");
      button.innerHTML = "YOOOO";
      button.style.backgroundColor = "red";
      button.style.color = "white";
  
      // Problem Two : If I click on the button, nothing happends
      button.addEventListener("click", function(e) {
          alert(e.target);
      }, false);
  
      var clas = document.getElementsByClassName("test");
      Array.from(clas).forEach(element =&gt; {
          element.appendChild(button);
          element.innerHTML += ""; // First problem : If I don't do this, the button does not appear in the first div. I have no idea why !
      });
  }
  createButton();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body {
      margin: 0;
      padding: 0;
      display:flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: rgba(30, 30, 30, 0.2);
  }
  
  button {
      cursor: pointer;
      width: 80px;
      height: 50px;
      padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;bug&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="test" id="1" style="padding: 50px;"&gt;
      &lt;span&gt;1&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="test" id="2" style="padding: 50px;"&gt;
      &lt;span&gt;2&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>