Question

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

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

如何使用jQuery动态更改“Button Label”文本，同时保持输入不变？

我尝试过使用.text（），但也替换了输入。

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

谢谢！

Answer 1

这是一个解决方案。保存div的子节点，设置文本，然后将chilrden附加回它。

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

<强> Example.

Answer 2

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

Answer 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 ";

Answer 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。

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

4 个答案: