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

Question

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

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

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

我的情况可能需要一些灵 active 。我可能不知道按钮的内部 html。

生成的 html 类似于:

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

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

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

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

我知道我可以通过执行 .children() 来获取插入符。但我不一定知道 html 元素的顺序是什么。插入符号可能在前面，或者它可能放在文本之后，它可以是任何顺序。如果有两个图标怎么办？我只想替换按钮的文本并保留 html。

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

Answer 1

你可能不需要 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;
}

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

---

或者，如果文本的位置不同，您也可以只使用 .content() 方法来检索子元素和文本节点。迭代这些值并确定它是否是文本节点并更改它。

$('.btn').contents().each(function() {
   if (this.nodeType === 3 && this.nodeValue.trim()) {
     this.textContent = '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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    People <span class="caret"></span>
</button>