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>

在这种情况下，它只将它添加到第2段。如果你注释掉第二个函数调用它会正确地将它添加到第一个段。然而，它成功地更新了para内容。

任何有助于升级的帮助。

Answer 1

当您第二次致电Node.insertBefore时，它会将您的errorNode从第一段移到第二段。正如W3.org所述：

如果newChild已经在树中，则首先将其删除。

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

Answer 2

您只需创建1个errorNode元素，并在每次调用insertBefore()时在dom中移动它。

相反，如果要将节点添加到不同位置，则需要创建节点的新实例。您可以创建节点的克隆来执行此操作，如

＆＃13;

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var errorNode = document.createElement("span");
errorNode.className = "ms-formvalidation";
errorNode.innerHTML = '<span role="alert">You must specify a value for this required field.<br></span>';
var errorField = document.getElementById('1');
errorField.innerHTML = 'para 1';
insertAfter(errorField, errorNode.cloneNode(true));
errorField = document.getElementById('2');
errorField.innerHTML = 'para 2';
insertAfter(errorField, errorNode.cloneNode(true));

＆＃13;

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

＆＃13;

Javascript函数不适用于多个元素

2 个答案: