Javascript 当我更新bs3中的组列表时，我丢失了图示符图标

这是我的html

    <div class="list-group">
        <a href="#" id="lblChoice0" class="list-group-item">zero<i id="0" class="icon-volume-up icon-2x"></i></a> 
        <a href="#" id="lblChoice1" class="list-group-item">one<i id="1" class="icon-volume-up icon-2x"></i></a>
        <a href="#" id="lblChoice2" class="list-group-item">two<i id="2" class="icon-volume-up icon-2x"></i></a>
        <a href="#" id="lblChoice3" class="list-group-item">three<i id="3" class="icon-volume-up icon-2x"></i></a>
        <a href="#" id="lblChoice4" class="list-group-item">four<i id="4" class="icon-volume-up icon-2x"></i></a>
    </div>

如何让字形图标保持不变？

试试以下方法：

$（'lblChoice0'）.html（msg.d[0]+''；
$（'#lblChoice1'）.html（msg.d[1]+''）；
$（'lblChoice2'）.html（msg.d[2]+''）；
$（'#lblChoice3'）.html（msg.d[3]+''）；
$（'#lblChoice4'）.html（msg.d[4]+''）

或者（这可能更好）：

使您的HTML如下所示：


然后在jQuery中：

$（'#title_0'）.html（msg.d[0]）

显然，对所有5行执行相同的操作。
尝试以下操作：

$（'lblChoice0'）.html（msg.d[0]+''；
$（'#lblChoice1'）.html（msg.d[1]+''）；
$（'lblChoice2'）.html（msg.d[2]+''）；
$（'#lblChoice3'）.html（msg.d[3]+''）；
$（'#lblChoice4'）.html（msg.d[4]+''）

或者（这可能更好）：

使您的HTML如下所示：


然后在jQuery中：

$（'#title_0'）.html（msg.d[0]）

显然，对所有5行执行相同的操作。
发生这种情况是因为您替换了
a
的全部内容，其中也包含图标。最简单的方法是将文本包装到另一个元素中，然后改为更改该元素的内容


$（文档）.ready（函数（）{
$（'#try'）。单击（函数（）{
var msg={
d:['a'，'b'，'c'，'d'，'e']
};
$（'lblChoice0 span'）.html（msg.d[0]）；
$（'lblChoice1 span'）.html（msg.d[1]）；
$（'lblChoice2 span'）.html（msg.d[2]）；
$（'lblChoice3 span'）.html（msg.d[3]）；
$（'lblChoice4 span'）.html（msg.d[4]）；
});
});
i{
显示：内联块；
宽度：20px；
背景色：红色；
高度：20px；
}

更改
发生这种情况是因为您替换了包含图标的
a
的全部内容。最简单的方法是将文本包装到另一个元素中，然后改为更改该元素的内容


$（文档）.ready（函数（）{
$（'#try'）。单击（函数（）{
var msg={
d:['a'，'b'，'c'，'d'，'e']
};
$（'lblChoice0 span'）.html（msg.d[0]）；
$（'lblChoice1 span'）.html（msg.d[1]）；
$（'lblChoice2 span'）.html（msg.d[2]）；
$（'lblChoice3 span'）.html（msg.d[3]）；
$（'lblChoice4 span'）.html（msg.d[4]）；
});
});
i{
显示：内联块；
宽度：20px；
背景色：红色；
高度：20px；
}

Change
使用html方法将更改子节点内的所有内容，因为我相信，子节点内的将被覆盖。innerHtml将work@Andreihtml（）是jQuery，innerHTML是VanillaJS。。。但两者的结果相同。拆分跨距以使图像成为不同的元素，并仅使用文本更改跨距！是的，我试过了，忘了。最好的答案是下面的@Sam。使用html方法将更改子节点内的所有内容，因为它内部的内容将被覆盖，我相信。innerHtml将work@Andreihtml（）是jQuery，innerHTML是VanillaJS。。。但两者的结果相同。拆分跨距以使图像成为不同的元素，并仅使用文本更改跨距！是的，我试过了，忘了。最好的答案是下面的@Sam。
    $('#lblChoice0').html(msg.d[0]);
    $('#lblChoice1').html(msg.d[1]);
    $('#lblChoice2').html(msg.d[2]);
    $('#lblChoice3').html(msg.d[3]);
    $('#lblChoice4').html(msg.d[4]);