添加div作爲節點的唯一子節點

我試圖將div僅作爲子節點添加到節點。如果該節點已經有任何孩子讓他們成爲div的子女。添加div作爲節點的唯一子節點

原始DOM的樣子：

<a href = ""> 
    <span id="gsp" > </span> 
    <span id="gbsp"> some text </span> 
</a>

我所要的輸出是：

<a href = ""> 
    <div id="oaa_web_accessibility_highlight"> 
    <span id="gsp" > </span> 
    <span id="gbsp"> some text </span> 
    </div> 
</a>

代替，下面摘錄給我：

<a href = ""> 
    <div id="oaa_web_accessibility_highlight"> </div> 
    <span id="gsp" > </span> 
    <span id="gbsp"> some text </span> 
</a>

我想使用下面的代碼片段，但它不工作。

var new_div_element = this.document.createElement('div'); 
new_div_element.id = 'oaa_web_accessibility_highlight'; 
node.insertBefore(new_div_element, node.childNodes[0]); 
for (var i =0; i < node.childNodes.length; i++) { 
    if (i == 0) continue;   
    node.childNodes[0].appendChild(node.childNodes[i]);   
}

請誰能幫我解決這個問題？

來源

2012-10-05 user1588142

「this」和「node」在您的代碼示例中未顯示/定義。 –

做這樣的：

var new_div_element = document.createElement('div'); 
new_div_element.id = 'oaa_web_accessibility_highlight'; 

while (node.firstChild) { 
     new_div_element.appendChild(node.firstChild);   
} 

node.appendChild(new_div_element);

這清空的node把孩子培養成new_div_element，然後追加new_div_element到現在空node。

它不使用innerHTML，所以你不會銷燬正在傳輸的元素的任何狀態。

僅供參考，你沒有正常工作的原因是你的循環遞增i，但是當你做.appendChild您刪除從.childNodes列表元素。

由於.childNodes是一個實時列表，當您將其中一個項目移動到其他位置時，其內容會更新。結果，在第一個孩子被移除後，第二個孩子在該索引處取代其位置。由於您的i已增加，因此它會跳過已重新放置在列表中的那個（s）。

來源

2012-10-05 19:37:17

哦，好吧，謝謝。我可以在節點上看到我想要的更改。我使用Firebug。當我試圖查看Firebug HTML面板時，文本節點在網絡瀏覽器上被刪除，並且Firebug向我顯示：。沒有div沒什麼。 – user1588142

@ user1588142：我不明白。你是說我上面的代碼是從'span'內刪除文本節點嗎？如果是這樣，'node'代表什麼。我假設它是外層的''元素。如果沒有，那麼你需要告訴我什麼是'節點'。 –

我認爲這是我的另一個函數的問題，它必須撤消我正在用上面的代碼片段進行的操作。我修好了，謝謝你。 – user1588142

如果你願意使用jQuery，它有一個wrapAll方法可以爲你做到這一點。

$(node).children().wrapAll('<div id="oaa_web_accessibility_highlight"></div>');

來源

2012-10-05 20:19:06 Barmar

添加div作爲節點的唯一子節點

回答

相關問題