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>

(кстати, это идентичноto 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/