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/