javascript - 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').

为什么它会这样工作？我怎样才能真正改变文本，而不用将文本包装在 a 中<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/

这将返回所有 textNode 的集合，您可以更新其值，以便您可以引用任何您喜欢的文本。