繁体   English   中英

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

[英]Text nodes on JavaScript sometimes don't merge

合并 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>

在此处输入图片说明

从 99 到 2,它不包括“罗伯特”,但它在最后一行

您正在移动 robert 节点而不是添加克隆

附加孩子:

如果给定的子节点是对文档中现有节点的引用,则 appendChild() 将其从当前位置移动到新位置(在将节点附加到其他节点之前,不需要从其父节点中删除节点)。

 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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM