在 JS 中对同一个节点多次使用 appendChild

Posted 2023-05-09

【中文标题】在 JS 中对同一个节点多次使用 appendChild

【英文标题】：Using appendChild multiple times with the same node in JS

【发布时间】：2011-05-12 10:52:36

【问题描述】：

我正在为具有多个评分的表单编写表单验证脚本，并且我想插入一些文字，上面写着“给评分！”对于用户错过的每个评分。我编写了下面的代码来执行此操作，但我遇到了一个问题，即 give_rating 节点仅附加到表单上的最后一个节点。我知道这是因为 appendChild 基本上是移动一个节点而不是复制它，我尝试使用 cloneNode 解决这个问题，但这完全破坏了我的 JS。

无论如何，这是代码。我做错了什么？

感谢您的帮助，

克里斯

var give_rating = document.createElement('span');
give_rating.className='small red';
give_rating.innerhtml = '<strong> &nbsp;Give a rating!</strong>';

document.getElementById('rating1').appendChild(give_rating);
document.getElementById('rating2').appendChild(give_rating);

当我使用上面的代码时，代码 give_rating 仅附加到“rating2”。

document.getElementById('rating1').appendChild(give_rating.cloneNode(True));
document.getElementById('rating2').appendChild(give_rating.cloneNode(True));

当我使用此代码时，整个脚本都会失败。如何添加“给予评分！”的实例对于用户未填写的表单上的每个评分？

【参考方案1】：

javascript 区分大小写：True 应为 true（小写）。

【讨论】：

天哪，卡萨布兰卡，我在提交这个问题后立即下载了 Firebug，运行控制台并解决了这个问题。感谢您的答复。 JS 让我发疯 :)

【参考方案2】：

您只能插入创建的 html 元素或文档片段一次。所以，你必须调用 cloneNode() 函数。 javascript 区分大小写。所以，应该是cloneNode(true)，而不是cloneNode(True)。 您可以通过按F12 打开浏览器（Chrome 和 IE/Edge）的 javascript 调试器。然后你可以看到你的脚本发生了什么。