Javascript 函数不适用于多个元素

Question

我正在尝试在多个选定元素之后添加一个元素。问题是它似乎只将其应用于单个元素。 The code is in this fiddle .

<p id="1"></p>
<p id="2"></p>

<script>
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var errorNode = document.createElement("span");
errorNode.className = "error";
errorNode.innerHTML = 'You must specify a value';
var errorField = document.getElementById('1');
errorField.innerHTML = 'para 1';
insertAfter(errorField, errorNode);
errorField = document.getElementById('2');
errorField.innerHTML = 'para 2';
insertAfter(errorField, errorNode);

</script>

在这种情况下，它仅将其添加到第二段。如果您注释掉第二个函数调用，它将正确地将其添加到第一段中。然而，它正在成功更新段落内容。

提前感谢任何帮助。

Answer 1

当您第二次调用 Node.insertBefore 时，它会将您的 errorNode 从第一段移动到第二段。如W3.org所述:

If the newChild is already in the tree, it is first removed.

如果您想要两个错误节点，则需要创建两个，用文本填充每个节点，并将每个节点添加到自己的段落中。