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);

无论如何,如果您可以编辑您的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');