JavaScript: Appending same text to multiple tag in HTML

Question

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 "h1" tag that i want to insert inside multiple html tags like header,section,article,p etc.

I thought to do it by JS but while doing so it happens that if i append two different text in multiple tag it works fine which can be seen by clicking Button 2 the text with color:red gets append in p tag with id="output" & other text in p tag with id ="output2"

But while clicking Button 1 i am appending same text in both p tag but it only gets append in p tag with id ="output2".

What's the reason for that ?

Note:

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

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);
}

<!DOCTYPE html>
<html>
<head>
  <style>
    #output {
      color: red;
    }
  </style>
</head>
<title>
  XYZ
</title>

<body>
  <button onclick="main()">Button 1</button>
  <button onclick="temp()">Button 2</button>
  <p id="output">

  </p>
  <p id="output2">

  </p>
</body>
</html>

Deep · Accepted Answer · 2016-12-26 15:54:39Z

1

This is because in the main function the second call to appendchild() moves the element from first p element to the second p element.

This code

var h1 = document.createElement("h1");
var text = document.createTextNode("Heading 1");
h1.appendChild(text);

document.getElementById("output").appendChild(h1);
document.getElementById("output2").appendChild(h1);

first add the h1 in the output p element and the next line moves this h1 element to the output2 p element.

you can confirm the same by commenting out the second line and you will see heading 1 in red text which tell you that h1 was first added on this p element.

check here in the docs to know more

https://developer.mozilla.org/en/docs/Web/API/Node/appendChild

you need to create 2 node to get the desired result.

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);
      
      var h2 = document.createElement("h2");
      var text = document.createTextNode("Heading 2");
      h2.appendChild(text);
      
      document.getElementById("output").appendChild(h1);
      document.getElementById("output2").appendChild(h2);

    }

<!DOCTYPE html>
<html>
<head>
  <style>
    #output {
      color: red;
    }
  </style>
</head>
<title>
  XYZ
</title>

<body>
  <button onclick="main()">Button 1</button>
  <button onclick="temp()">Button 2</button>
  <p id="output">

  </p>
  <p id="output2">

  </p>
</body>
</html>

edited Dec 26, 2016 at 15:54

answered Dec 26, 2016 at 15:48

Deep

9,7962 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eric Burdo Over a year ago

You could create a new method to build your node, and then just call that. It still creates multiple unique nodes (to satisfy the AppendChild requirement), but it lets you keep your code DRY (aka, Don't Repeat Yourself). It's the method makeMyElement. See the jsFiddle here: jsfiddle.net/sohfd5c4/3

Deep Over a year ago

yes I agree but x and y are 2 different element. If you will try to append x again twice it will move from output to output2

Eric Burdo Over a year ago

Correct. I was just offering a way to streamline his code for making two different elements. I probably wasn't clear in my last comment.

Collectives™ on Stack Overflow

JavaScript: Appending same text to multiple tag in HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related