如何用另一個元素包裝HTML中的所有文本？

FROM

<div> 
    whats up! 
    <div> whats up2! </div> 
    thank you for your help 
    <div></div> 
</div>

<div> 
    <span>whats up!</span> 
    <div><span> whats up2! </span></div> 
    <span>thank you for your help</span> 
    <div></div> <!---STAYS THE SAME --> 
</div>

我怎麼會做出的jQuery或純JavaScript這樣的事情？

來源

2012-12-28 bluejamesbond

好吧，我能想到的唯一方法是在所有文本中首先添加另一個元素，例如，然後從那裏開始......可以說，我不知道從哪裏開始此方法。我試圖實現可以做到，如果我去所有的文本，只是添加一套標識符，但我想要避免這一點，並感覺它在HTML渲染 – bluejamesbond

有了這個HTML：

<div id="container" > 
    whats up! 
    <div> whats up2! </div> 
    thank you for your help 
</div>

你可以做這樣的事情：

var nodes = document.getElementById('container').childNodes; 

$(nodes).each(function(ind, el){ 
    if(el.nodeType == 3) 
     $(el).wrap('<span>'); 
    else 
     $(el).wrapInner('<span>'); 
});

據我所知，你不能使用jQuery（是否正確我得到的文本節點我錯了「），所以你可以用純JavaScript獲得它們並使用jQuery的方法wrap

http://jsfiddle.net/hyJA6/2/

來源

2012-12-28 09:44:59 davids

開頭什麼，如果你想申請這個身體中的每個元素？我有挑戰獲取body的childNodes：它是'document.getElementsByTagName（'body'）。childNodes;'？編輯：實際上，我會找出那一個：D，但謝謝 – bluejamesbond

不，因爲你會得到所有的第一級的孩子。你應該使用一些遞歸函數，這是一個很好的開始http://stackoverflow.com/questions/8321874/how-to-get-all-childnodes-in-js-including-all-the-grandchildren – davids

只是爲了保持完整性，提供的解決方案@davids，擴展了更深層次的工作，可以寫爲「純」的jquery

$('#container') 
.find('*') 
.andSelf() 
.contents() 
.filter(function() { 
    return this.nodeType == 3; 
}) 
.wrap('<span>')

該內容如下所示：得到的#container的全部內容，並所有這些都是正確的DOM兒童，只保留文本節點（nodeType == 3）並將它們包裝在<span>中。

注意，如果應用於大型DOM樹，這將變得非常慢。

來源

2012-12-28 10:33:04 charisis

如何用另一個元素包裝HTML中的所有文本？

回答

相關問題