Javascript 替换/更改按钮的文本，但保留内部html元素

给定一个带有图标的按钮：

<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    People <span class="caret"></span>
</button>

我确实在使用jQuery，如果我使用了：

$('button.dropdown-toggle').text('Jeff');

显然，这将删除插入符号。我不想去掉插入符号

我知道我可以通过执行

.children（）

来获得插入符号。但我不一定知道html元素的顺序。可能插入符号是第一个，也可能是放在文本之后，可以是任意顺序。如果有两个图标呢？我只想替换按钮的文本并保留html

---

我通常无法控制按钮中的HTML。

您可能不需要jQuery

如果文本节点的位置已知，则只需访问

.caret

元素的上一个同级文本节点，并直接更改值：

document.querySelector（'.btn.caret'）.previousSibling.nodeValue='Something'
.caret{
显示：内联块；宽度：0；高度：0；左边距：2px；垂直对齐：中间；边框顶部：4px虚线；边框顶部：4px实心\9；边框右侧：4px实心透明；边框左侧：4px实心透明；
}

人

这将用Jeff替换字符串'people'，您可以这样更改，为按钮名称添加一个内部范围：

<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
 <span id='innerBtn'>Jeff <span>
<span class="caret"></span>
</button> 

$("#innerBtn").html('TEXT CHANGE');

将“人”本身放入标签中，并更改该标签的内容。这可以适应按钮内部HTML中的更多更改，而不必确保要替换的元素是唯一的文本、第一个文本、插入符号的同级等，也不管文本“People”是否更改


document.querySelector（'.btn.target'）.innerHTML='Something'
.caret{
显示：内联块；宽度：0；高度：0；左边距：2px；垂直对齐：中间；边框顶部：4px虚线；边框顶部：4px实心\9；边框右侧：4px实心透明；边框左侧：4px实心透明；
}

人
试试，像这样的


函数更改（）{
var c=$（“按钮”）.children（）；
$（“按钮”）.text（“第二个”）.append（c）；
}

第一跨
我不喜欢这个答案的原因是，它对要替换的内容的结构（它是一个文本节点）进行了静默限制。为什么不给它一个标签和地址呢？面对目标内容周围的HTML更改，它更直截了当、更健壮。@DanFarrell你的答案有什么不同？啊，我的答案在动态内容更新的目标周围加了一个标签。为什么不呢？为什么坚持它是一个文本节点？然而，我的anwer看起来确实是@devpro的副本。@DanFarrell好吧，OP说“我无法控制将要使用的HTML”。这就是为什么我提供了第二个解决方案。然而，这是关于OP已经给出的限制的最灵活的答案。它只依赖于语义层次结构，这是唯一一件看起来（相对）清晰的事情。是的，我真的很喜欢这个答案。面对设计更改时灵活而健壮。我无法控制将要使用的HTML。@约翰斯顿：你可以尝试使用$（'one'）.HTML（$（'one'）.HTML（）.replace（'text'，'replace'））；一旦按钮的原始文本内容发生更改，以及执行一次后，替换将失败。@devpro Imho如果您开始对HTML进行regexing，最好使用Joshs answer，因为使用regexes可以实现的最接近于它的一个基于字符串的变体。这是可行的，但它非常不灵活。一旦你添加了正则表达式无法轻松匹配的任何其他内容，或者只是想动态更改文本，基于文本的替换就会停止。我不明白你是否真的对HTML没有任何看法，除了你想要更改的文本后面有一个“.caret”span，为什么你会期望这一事实成立。难道他们不太可能在“人”旁边添加图像、格式或任何形式的内容更新吗？你甚至可以确定只有一个文本节点需要替换，并且它永远不会包装在HTML元素中吗？OP无权访问HTML
var strNewString = (your class name or div name).html().replace('people','Jeff');

your class/div.html(strNewString);

<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
 <span id='innerBtn'>Jeff <span>
<span class="caret"></span>
</button> 

$("#innerBtn").html('TEXT CHANGE');

$('.btn btn-default').html($('.btn btn-default').html().replace('Jeff','TEXT CHANGE'));