javascript - JavaScript 上的文本节点有时不会合并

Question

当合并 3 个不同段落中的 3 个文本节点时，前两个 ps 不会合并到其中一个文本节点中。它应该在其他两个文本节点之间连接名称 Robert。它只适用于循环的最后一部分。 (请参阅最后一行以了解它的外观)。控制台上没有错误显示。

你能告诉我为什么它不起作用吗？或者也许有更好的方法来合并您所知道的文本节点？

这是学校的练习；我必须在 JavaScript 上使用 DOM。我附上了结果的屏幕截图。

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

您正在移动 robert 节点而不是添加 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>