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

给出一个带图标的按钮:

    People 

我想替换文本People并保留按钮的html部分.

我的情况可能需要一些灵活性.我可能不知道按钮的内部html.

生成的html类似于:

    Jeff 
 

我碰巧使用jQuery,如果我这样做:

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

显然,这将删除插入符号.我不想删除插入符号.

我知道我可以通过这样做得到插入符号.children().但是我不一定知道html元素的顺序.也许插入符号是第一个,或者它可能是放在文本之后,它可以是任何顺序.如果有两个图标怎么办？我想只替换按钮的文本并保留html.

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

你可能不需要jQuery.

如果已知文本节点的位置,则只需访问.caret元素的上一个兄弟文本节点并直接更改该值:

document.querySelector('.btn .caret').previousSibling.nodeValue = 'Something';

.caret {
  display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid\9; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

    People