title: JavaScript: Appending same text to multiple tag in HTML
body: <p>I am a learner to JS and while learning i was trying to append same text in multiple tags for html. For example if i had a <strong>"h1"</strong> tag that i want to insert inside multiple html tags like <strong><em>header,section,article,p</em></strong> etc. </p>
  
  <p>I thought to do it by JS but while doing so it happens that if i append two <strong>different text</strong> in multiple tag it works fine which can be seen by clicking  <em>Button 2</em> the text with <strong><em>color:red</em></strong> gets <strong>append in p tag with id="output" &amp; other text in p tag with id ="output2"</strong></p>
  
  <p>But  while clicking <em>Button 1</em> i am appending <strong>same text in both p tag</strong> but it only gets append in <strong>p tag with id ="output2"</strong>.</p>
  
  <p>What's the reason for that ?</p>
  
  <p>Note:</p>
  
  <p><em>Although i said i want to append the text but my initial thought was to do it completely by JS thats why i am creating element and then text node and then appending it in HTML</em> </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 temp() {
      var h1 = document.createElement("h1");
      var text = document.createTextNode("Heading 1");
      h1.appendChild(text);
  
      var h2 = document.createElement("h2");
      var text2 = document.createTextNode("Heading 2");
      h2.appendChild(text2);
  
      document.getElementById("output").appendChild(h1);
      document.getElementById("output2").appendChild(h2);
  }
  
  function main() {
      var h1 = document.createElement("h1");
      var text = document.createTextNode("Heading 1");
      h1.appendChild(text);
  
      document.getElementById("output").appendChild(h1);
      document.getElementById("output2").appendChild(h1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      #output {
        color: red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;title&gt;
    XYZ
  &lt;/title&gt;
  
  &lt;body&gt;
    &lt;button onclick="main()"&gt;Button 1&lt;/button&gt;
    &lt;button onclick="temp()"&gt;Button 2&lt;/button&gt;
    &lt;p id="output"&gt;
  
    &lt;/p&gt;
    &lt;p id="output2"&gt;
  
    &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>