MooTools：更改元素文本，使嵌套元素保持不變

Question

我對設置text屬性的可能性以及與設置html的差異感到困惑。基本上，我有與它的圖像的段落：

<p id="test">Title <img src="/someimage.jpg" /></p>

我想要做的，就是變化「標題」到別的東西。所以，我做什麼（用MooTools的）：

$('test').set('text', 'Different title');

然而，這只是取代了段落元素的全部內容，剝離圖像元素，如下所示：http://jsfiddle.net/4vhtR/1/

我會一直期待這只是更改文本，實際文本，而不是包含的任何HTML元素。現在看起來就像使用set('html', 'Different title')一樣。

它爲什麼這樣工作？我怎麼才能真正改變文本，而不是將文本包裝在<span>中，或者將圖像與JS複製並放回，這會使它複雜化？

Answer 1

正確的做事方式是通過文本節點。 https://developer.mozilla.org/en-US/docs/DOM/Node.nodeValue

Element.implement({ 
    getTextNodes: function(){ 
     return Array.filter(this.childNodes, function(el){ 
      return el.nodeType == 3; 
     }); 
    } 
}); 

var textNodes = $('test').getTextNodes(); 

textNodes[0].nodeValue = 'Hi there'; 

http://jsfiddle.net/dimitar/4vhtR/4/

這將返回所有textNodes的集合，你可以更新的，所以你可以參考你喜歡的任何文本位值。