Mootools設置元素文本而不會破壞子節點

Question

使用Mootools，在不覆蓋任何子節點的情況下設置元素文本的最簡單方法是什麼？

我想從這個

<div id="foo"> 
    foo 
    <div id="bar"> 
    bar 
    </div> 
</div> 

去......這個

<div id="foo"> 
    new improved foo 
    <div id="bar"> 
    bar 
    </div> 
</div> 

我認爲這將做到這一點：

$('foo').set('text', 'new improved foo') 

但替換整個元素含量，導致

<div id="foo"> 
    new improved foo 
</div> 

（順便說一下，這與 set('html', ...) AFAICS相同。這是一個MooTools的錯誤？）

Answer 1

如果文字內容始終是你的標籤內的第一件事情，你可以嘗試讓所有的兒童元素，編輯文本，然後重新注入孩子以後。

var myChildren = $('foo').getChildren().dispose(); 
$('foo').set('text', 'new improved foo'); 
$('foo').adopt(myChildren); 

演示在這裏：http://jsfiddle.net/x2Vke/

---

無論如何，如果你可以編輯你的HTML代碼，我建議你包裝你的文字內容在一些內嵌標籤像<span>和借鑑它爲了替換文字：

<div id="foo"> 
    <span class="text-content">foo</span> 
    <div id="bar"> 
    bar 
    </div> 
</div> 

然後你可以簡單地做：

$('foo').getFirst('.text-content').set('text', 'new improved foo'); 

演示：http://jsfiddle.net/hMNXN/