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

我使用呈现一个div样式“按钮”，它的HTML看起来像这样一个插件：在包含文本和HTML元素的div中，如何使用JQuery仅更改文本而不是元素？

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

如何动态地更改“按钮标签”文本与jQuery，同时使输入完整？

我试过使用.text（），但它也取代了输入。（注意：我无法控制插件呈现的HTML，所以我被这种结构所困）。

谢谢！

来源

2011-11-02 Ben Roberts

做ü有一个链接，并笏为u [R使用 – defau1t

使用AJAX fileuploader插件的插件。没有链接到我自己的代码，但插件的主页上的一个例子。 http://valums.com/ajax-upload/ –

这里有一个解决方案。保存div的子项，设置文本，然后将chilrden添加回去。

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

Example.

来源

2011-11-02 04:22:16 Marko

谢谢！简洁，灵活，并为我工作。 –

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

来源

2011-11-02 04:23:30

你可以通过每个节点重复，并寻找与内容匹配的文本节点。一旦找到，只能在该节点上工作。

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。

来源

2011-11-02 04:55:58 Anurag

您可以直接用代码访问文本节点在普通的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 ";

来源

2011-11-02 05:15:38 jfriend00

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

回答

相关问题