在包含文本和 HTML 元素的 div 中，如何使用 JQuery 仅更改文本而不更改元素？答案

【问题标题】：Within a div containing both text and an HTML element, how to change only the text and not the element, using JQuery?在包含文本和 HTML 元素的 div 中，如何使用 JQuery 仅更改文本而不更改元素？
【发布时间】：2011-11-02 04:17:30
【问题描述】：

我正在使用一个呈现 div 样式“按钮”的插件，其 html 如下所示：

<div id="div-id">
  "Button Label"
  <input type="file" . . . >
</div>

如何使用 jQuery 动态更改“按钮标签”文本，同时保持输入不变？

我尝试过使用 .text() 但它也替换了输入。

（注意：我无法控制插件呈现的 HTML，所以我坚持使用这种结构）。

谢谢！

【问题讨论】：

你有链接吗，你用的插件是什么
使用 ajax 文件上传插件。没有指向我自己的代码的链接，而是插件主页上的示例。 valums.com/ajax-upload

标签： javascript jquery

【解决方案1】：

这是一种解决方案。保存 div 的子元素，设置文本，然后将子元素追加回它。

var $children = $myDiv.children();
$myDiv.text("New Button Label").append($children);

Example.

【讨论】：

【解决方案2】：

$("#div-id").html(function(i,oldhtml){
    return oldhtml.replace("Button Label","New label");
});

【讨论】：

【解决方案3】：

您可以使用以下代码直接访问纯 javascript 中的文本节点：

function getFirstTextNode(el) {
    var children = el.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeType == 3) {
            return(children[i]);
        }
    }
}

var textNode = getFirstTextNode(document.getElementById("div-id"));
textNode.nodeValue = "New Label ";

【讨论】：

【解决方案4】：

您可以遍历每个节点，并查找具有匹配内容的文本节点。找到后，仅在该节点上工作。

function isTextNode(node) {
    return node.nodeType == 3;
}

function hasText(node, text) {
    return node.nodeValue.trim() == text;
}

var nodes = $("#root").contents().filter(function() { 
    return isTextNode(this) && hasText(this, '"Button Label"');
});

nodes.replaceWith("New Label");

这是example。

【讨论】：