为什么我不能包装一系列 <li> 在带有javascript的代码中？

Question

我知道如何用jQuery做到这一点，但是我想用香草javascript学习，我觉得它会更快。 这是jsFiddle的链接，其中包含我正在尝试做的精简版本。 http://jsfiddle.net/yramagicman/MyM2B/及以下是有问题的脚本。

<script>
var id = 'ul';
var tag = 'li';
var wrapTag = 'span';
var wrapper = document.createElement(wrapTag);
var z = document.getElementById(id);
var y = z.getElementsByTagName(tag);
var count = y.length;
for (var i = 0; i < count; i++) {
    y[i].setAttribute("class", "red"); //so I can see the result
    wrapper.appendChild(y[i].cloneNode(true));
    y[i].parentNode.replaceChild(wrapper, y[i]);
    wrapper.setAttribute('class', 'hi'); //so I can see the result
}</script>
<!-- and the html-->
<ul id="ul" class="ul">
    <li class="li">1</li>
    <li class="li">2</li>
    <li class="li">3</li>
    <li class="li">4</li>
    <li class="li">5</li>
    <li class="li">6</li>
    <li class="li">7</li>
    <li class="li">8</li>
</ul>

我可以将整个Ul封装为div或span或其他任何形式，但是当我尝试封装每个列表项时，出现错误“ HIERARCHY_REQUEST_ERR：DOM异常3：在不属于该节点的位置插入了一个Node”。 有任何想法吗？

Answer 1

flem的答案不正确。 尽管<li>元素在任何版本的HTML中都不能作为<span>元素的子元素有效，但对于DOM来说应该不是问题，实际上不是。

您需要了解两个关键信息。 第一个是getElementsByTagName返回的节点列表是附加到DOM文档的活动列表。 如果JS循环更改DOM文档，则列表将更新。

第二个是您只创建一次包装器元素，但是每次循环时都将其与replaceChild一起使用。

因此，第一次在循环中一切正常。 循环第二次，将克隆的元素添加到包装器中，该包装器现在在DOM文档中，因此成为y节点列表中的第二个元素。

因此， y[i]不再是源<li>而是源对象<li> ，因此y[i].parentNode是包装器元素。

这意味着在replaceChild行上，您的代码正在尝试使wrapper元素成为其自身的子级。 这是不可能的，因此是HIERARCHY_REQUEST_ERR

Answer 2

您正在构建无效的DOM。 <li>必须属于<ul>或<ol>但是您试图将其放在<span> 。 因此出现错误： “节点插入到它不属于的位置” 。