为html字段分配新值时，如何保留内部符号

Question

我们有一个下拉字段，它将显示用户的别名。为了强调它是一个下拉列表，有一个名为caret的类显示了一个三角形。

这部分的代码是用这样的html编写的。

<a
id="username"
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>**username will go here**<i id="caret" class="caret"></i>
</a> 

当我们将值分配给"时，插入符号消失；用户名"；。我认为这是因为<i id="caret" class="caret"></i>在那个类中。

所以我想做的补救措施是在重新分配时将类添加到字符串中，就像一样

$('#username').text(name);
$('#username').addClass("caret")

显然，这不是正确的方法，否则我就不会问这个问题。填充字段时，如何防止三角形消失？

我还将类移到了id=username之外，这打乱了页面的显示方式。

Answer 1

<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
><span id="username">**username will go here**</span><i id="caret" class="caret"></i>
</a> 

$('#username').text(name);