javascript - 追加时节点从循环中消失

Question

Simplest Solution

我正在尝试回答 Hide second line of text with CSS带有 JS 版本

为什么第二行从我的循环中消失？文本节点是否由于某种原因卡在了 BR 上？

我想隐藏 BR 和后续行，但我没有将第二行移动到 span

预期的结果是当遇到 BR 时，它和所有后续节点都被移动到 span，最后 span 附加到 br 曾经所在的 div，在这种情况下使第二行变为红色

我玩过 cloneNode，效果更好，但我想移动节点，而不是克隆它们。我也考虑过 substring the innerHTML 但担心 BR 的各种渲染和 toString 不可靠

输入:

<div class="site-info">The quick brown fox <br>Jumps over the lazy dog</div>

预期输出:

<div class="site-info">The quick brown fox <span class="hide"><br>Jumps over the lazy dog</span></div>

尝试:

var si = document.querySelector(".site-info")
var nodes = si.childNodes;
var span = document.createElement("span");
span.className="hide"
var found = false;
nodes.forEach(n => {
  console.log(n.tagName || "No tag",n.wholeText || "No text")
  if (n.tagName==="BR") { // first br found
    found = true; 
  }  
  if (found) { // from now on to end of all nodes
    span.appendChild(n) // n.cloneNode(true) 
  }
});
si.appendChild(span)

.hide { color:red }/* display: none }*/

<div class="site-info">The quick brown fox <br>Jumps over the lazy dog</div>

---

预期结果 注意:color:red 在实际版本中将显示为 display:none，如果 display:none 被代码删除，则第二行将出现 BR

.hide { color:red }

<div class="site-info">The quick brown fox <span class="hide"><br>Jumps over the lazy dog</span></div>

Answer 1

当您在循环之前执行 console.log(nodes) 时，您会注意到 span 已作为子节点包含在内。

在遍历节点时，这似乎与 span.appendChild 的逻辑混淆了。

编辑:根据评论，当为 br 标签调用 appendChild 时，元素会从 DOM 中移除，这会改变 nodes< 内的引用 数组并导致两个文本节点合并，因为它们不再分开。因此循环将不再到达前第三次迭代，因为该数组元素不再存在。

如果您将用于在循环外附加节点的逻辑提取出来，它会起作用:

var si = document.querySelector(".site-info")
var nodes = si.childNodes;
var span = document.createElement("span");
span.className = "hide"
var found = false;
let childs = [];
nodes.forEach((n, i) => {
  if (n.tagName === "BR") {
    found = true;
  }
  if (found) {
    childs.push(n);
  }
});
if (childs.length > 0) {
  childs.forEach((n) => {
    span.appendChild(n);
  });
  si.appendChild(span);
}

.hide {
  color: red
}

<div class="site-info">The quick brown fox <br>Jumps over the lazy dog</div>

话虽如此，我实际上还没有找到发生这种情况的原因，所以可能有更优雅的解决方案。