Question

我看到这已被问过很多次了。但是，遗憾的是我没有遇到过直接的解决方案。大多数解决方案都围绕div中的多个节点。

所以这是问题所在。我有以下标记：

<div class="test">Text1<span></span></div>

我需要将“Text1”替换为“Text2”，而不会影响附加到span标记的span标记和事件处理程序。

执行$('.test')html('Text2<span></span>')之类的操作会替换文本。但是，删除span标记上的事件处理程序，这是不希望的。我正在寻找一种快速有效的方法。

Answer 1

使用标记包装可替换文本：

<div class="test"><span class="test-text">Text1</span><span></span></div>

Answer 2

您可以使用Text Node访问contents。现在，如果你知道元素以文本开头，你可以这样做：

$($('.test').contents()[0]).replaceWith('New Text');

现在，如果您不知道文本节点数组中的位置，可以使用以下内容进行过滤：

return this.nodeType === 3;

并比较文本值（如果你知道的话）。

Fiddle

Answer 3

如果要添加带有.live或.on函数的事件处理程序（取决于jQuery版本）.html（'Text2'）可以正常工作。

Answer 4

假设要替换的文本总是在现有范围之前，那么它将始终是firstChild 和，它将是一个未包装的textNode：

$('.test').click(
    function() {
        this.firstChild.nodeValue = 'Text2';
    });

JS Fiddle demo

确保只更改第一个textNode，无论它在.test元素中的位置如何：

$('.test').click(
    function(e) {
        var newText = 'Text2',
            children = e.target.childNodes;
        for (var i=0,len=children.length;i<len;i++){
            if (children[i].nodeName == '#text'){
                children[i].nodeValue = newText;
                return false;
            }
        }
    });

JS Fiddle demo

替换div中的文本而不影响其中的任何HTML标记

4 个答案: