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/