title: JavaScript’s element.appendChild() method behaving weird
body: <p>What i am trying to do is.. appending a common node/element in 3 elements..</p>
  
  <pre><code>const elements = document.getElementsByClassName(“test”);
  const newElement = document.createElement(“BUTTON”);
  newElement.classList.add(“dummy”);
  
  Array.from(elements).forEach(item =&gt; {
  item.appendChild(newElement);
  });
  </code></pre>
  
  <p>Expected behaviour is that all <code>.test</code> elements should contain <code>.dummy</code> button.. </p>
  
  <p>but actually only last <code>.test</code> element getting that <code>.dummy</code> button..</p>
  
  <p>But if i place that button in loop like this :</p>
  
  <pre><code>const elements = document.getElementsByClassName(“test”);
  
  Array.from(elements).forEach(item =&gt; {
  const newElement = document.createElement(“BUTTON”);
  newElement.classList.add(“dummy”);
  item.appendChild(newElement);
  });
  </code></pre>
  
  <p>then all <code>.test</code> elements get that <code>.dummy</code> button..!!</p>
  
  <p>Can anyone explain any particular reason about this JS behaviour ? I have tried to google it but didn’t find any good explanation about this.</p>