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

我知道这已经被问了很多次了。但不幸的是，我还没有找到一个直接的解决办法。大多数解决方案围绕div中的多个节点展开

所以问题来了。我有以下标记：

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

Text1

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

---

执行类似于

$（'.test'）html（'Text2'）

的操作会替换文本。但是，删除span标记上的事件处理程序，这是不需要的。我正在寻找一种快速有效的方法来解决这个问题。

用标签包装可替换文本：

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

Text1

用标签包装可替换文本：

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

Text1

如果您要添加带有

.live

或

.on

函数的事件处理程序（取决于jQuery版本）。html（'Text2'）可以正常工作。

如果您要添加带有

.live

或

on

函数的事件处理程序（取决于jQuery版本）。html（'Text2'）可以很好地工作。

您可以使用访问。现在，如果您知道元素以文本开头，则可以执行以下操作：

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

现在，如果您不知道文本节点在数组中的位置，可以使用以下方法进行筛选：

return this.nodeType === 3;

并比较文本值（如果您知道这些值）

您可以使用访问。现在，如果您知道元素以文本开头，则可以执行以下操作：

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

现在，如果您不知道文本节点在数组中的位置，可以使用以下方法进行筛选：

return this.nodeType === 3;

并比较文本值（如果您知道这些值）

---

假设要替换的文本始终位于现有跨度之前，它始终是

第一个子节点，并且它将是一个未包装的文本节点：

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


要确保仅更改第一个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;
            }
        }
    });​

$（'.test'）。单击(
职能（e）{
var newText='Text2'，
children=e.target.childNodes；
对于（var i=0，len=children.length；i，假设要替换的文本将始终位于现有跨度之前，它将始终是
firstChild
，并且它将是一个未包装的文本节点：

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


要确保仅更改第一个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;
            }
        }
    });​

$（'.test'）。单击(
职能（e）{
var newText='Text2'，
children=e.target.childNodes；
对于（var i=0，len=children.length；i）如何确定要替换的文本？文本是否始终位于第一个标记之前？以及响应什么事件？更改标记（将文本包装到元素中）是目前为止最简单的修复方法。@brad Yes文本将始终位于span标记之前。如何确定要替换的文本？文本是否始终位于第一个标记之前？以及响应什么事件？更改标记（将文本包装在元素中）是目前为止最简单的解决方案。@brad是的，文本将始终位于span Tag之前。我想这是目前为止最简单的解决方案。虽然我从未想过。Thx表示同样的。我想这是目前为止最简单的解决方案。虽然我从未想过。Thx表示同样的。Thx表示答复。我看到您正在处理此问题。但是，unf很可能这会在语句末尾为我抛出一个非法字符错误。Thx用于答复。我看到您正在处理此问题。但不幸的是，这会在语句末尾为我抛出一个非法字符错误。