Javascript 如何在按钮文本中包含HTML

我有一个使用bootstrap的按钮组，当前在“所有”旁边显示一个插入符号：

<div class = "input-group-btn">
     <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" style = "padding-bottom: 11px;">All <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">All </a></li>
        <li><a href="#">Only Played </a></li>
        <li><a href="#">Include Free </a></li>
        <li><a href="#">Include Free and Only Played </a></li>
    </ul>
</div>

但插入符号随后被删除。有人能解释一下如何做，但要将插入符号保留在文本旁边吗？

使用

html（）

而不是

text（）

，并在替换所有内容时包含span元素的代码

或者，将文本包装在另一个span元素中，选择

$（“.btn:first child span:first child”）

并替换span的文本

或者，去掉插入符号的span，并在

：之后生成一个伪元素来代替样式。
$（“.btn:first child”）.append（$（“”）
$(".btn:first-child").append($("<span class='carat'/>"))


^将其添加到JS的末尾
 我已将其更改为：（$（this）.text（））.concat（''）.html（），但这给了我一个未捕获的类型错误：Undefined不是一个函数。它是第一个需要更改的文本，不是第二个，我的错。
$(".btn:first-child").append($("<span class='carat'/>"))