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的集合，您可以更新其值，以便您可以引用您喜欢的任何文本。

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

1 个答案: