0

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 Exception 3: ノードが属していない場所にノードが挿入されました」というエラーが表示されます。何か案は？

4

2 に答える 2

2

flemの答えは正しくありません。要素は、どのバージョンのHTMLでも要素<li>の子としては有効ではありませんが、DOMの問題ではなく、実際には問題ではありません。<span>

理解する必要のある2つの重要な情報があります。1つ目は、によって返されるノードリストgetElementsByTagNameがDOMドキュメントに添付されたライブリストであるということです。JSループがDOMドキュメントを変更すると、リストが更新されます。

2つ目は、ラッパー要素を1回作成しているが、ループの前後で毎回replaceChildで使用していることです。

したがって、最初のループではすべてが正常に機能します。2回目のループでは、複製された要素がラッパーに追加されます。ラッパーはDOMドキュメントに含まれているため、yノードリストの2番目の要素になります。

つまりy[i]、ソース<li>ではなく、代わりに複製された要素であり、したがってy[i].parentNodeラッパー要素です。

これは、replaceChild行で、コードがラッパー要素をそれ自体の子にしようとしていることを意味します。これは不可能であるため、HIERARCHY_REQUEST_ERR

于 2013-01-20T01:45:52.837 に答える
0

無効な DOM を構築しています。または<li>に属している必要がありますが、 に配置しようとしています。したがって、エラー: 「ノードが属していない場所にノードが挿入されました」。<ul><ol><span>

于 2013-01-19T18:32:17.407 に答える