Text nodes on JavaScript sometimes don't merge

Question

When merging 3 text nodes in 3 different paragraphs, the first two ps don't merge in one of the text nodes. It should concatenate the name Robert in between two other text nodes. It only works on the last part of the loop. (see the last line for what it should look like). No error showing on the console.

Can you tell my why it's not working? Or maybe there's a better way of merging text nodes you know of?

This is an exercise for school; I must use the DOM on JavaScript. I've attached screen shots of the result.

document.addEventListener('DOMContentLoaded', function() {

  var sing = document.getElementById('sing');

  sing.addEventListener('click', function() {


    var friend1 = document.createElement('div');
    friend1.className = "friend";
    var friend1h3 = document.createElement('h3');
    var robert = document.createTextNode('Robert');
    friend1h3.appendChild(robert);
    document.body.appendChild(friend1h3);


    for (var i = 99; i > 0; i--) {
      var friend1p = document.createElement('p');
      if (i > 2) {
        var a = document.createTextNode((i) + " lines of code in the file, " + (i) + " lines of code; ");
        friend1p.appendChild(a);
        friend1p.appendChild(robert);
        var b = document.createTextNode(" strikes one out, clears it all out " + (i - 1) + " lines of code in the file");
        friend1p.appendChild(b);

      } else if (i === 2) {
        var c = document.createTextNode("2 lines of code in the file, 2 lines of code; ");
        friend1p.appendChild(c);
        friend1p.appendChild(robert);
        var d = document.createTextNode(" strikes one out, clears it all out 1 line of code in the file");
        friend1p.appendChild(d);

      } else {
        var e = document.createTextNode("1 line of code in the file, 1 line of code; ");
        friend1p.appendChild(e);
        friend1p.appendChild(robert);
        var f = document.createTextNode(" strikes one out, clears it all out, 0 lines of code in the file");
        friend1p.appendChild(f);
      }
      document.body.appendChild(friend1p);
    }
  })
})

<button type="button" id="sing">Click</button>

Answer 1

You are moving the robert node around instead of adding a clone

appendChild:

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

document.addEventListener('DOMContentLoaded', function() {

  var sing = document.getElementById('sing');

  sing.addEventListener('click', function() {


    var friend1 = document.createElement('div');
    friend1.className = "friend";
    var friend1h3 = document.createElement('h3');
    var robert = document.createTextNode('Robert');
    friend1h3.appendChild(robert);
    document.body.appendChild(friend1h3);


    for (var i = 10; i > 0; i--) {
      var friend1p = document.createElement('p');
      if (i > 2) {
        var a = document.createTextNode((i) + " lines of code in the file, " + (i) + " lines of code; ");
        friend1p.appendChild(a);
        friend1p.appendChild(robert.cloneNode());
        var b = document.createTextNode(" strikes one out, clears it all out " + (i - 1) + " lines of code in the file");
        friend1p.appendChild(b);

      } else if (i === 2) {
        var c = document.createTextNode("2 lines of code in the file, 2 lines of code; ");
        friend1p.appendChild(c);
        friend1p.appendChild(robert.cloneNode());
        var d = document.createTextNode(" strikes one out, clears it all out 1 line of code in the file");
        friend1p.appendChild(d);

      } else {
        var e = document.createTextNode("1 line of code in the file, 1 line of code; ");
        friend1p.appendChild(e);
        friend1p.appendChild(robert.cloneNode());
        var f = document.createTextNode(" strikes one out, clears it all out, 0 lines of code in the file");
        friend1p.appendChild(f);
      }
      document.body.appendChild(friend1p);
    }
  })
})

<button type="button" id="sing">Click</button>