bootstrap label class

最新推荐文章于 2020-11-05 17:42:02 发布

bachelorchen

最新推荐文章于 2020-11-05 17:42:02 发布

阅读量2.7k

点赞数

分类专栏： bootstrap javascript

本文链接：https://blog.csdn.net/bachelorchen/article/details/44923961

版权

在尝试使用JavaScript动态生成Bootstrap的label类时，遇到了图标与文字紧挨在一起的问题。通过深入研究，发现是由于JS生成的HTML中各单词间缺少textnode导致的。修复这个问题后，代码便能正确显示预期的标签效果。

摘要由CSDN通过智能技术生成

想要用 js 生成下面代码的效果

  <span class="label label-success">Success</span>
  <span class="label label-success">Success</span>
  <span class="label label-success">Success</span>
  <span class="label label-success">Success</span>

但下面的 js 代码生成的 label 图标却都连在一块

var parent;
for (var i = 0; i < 4; ++i) {
  var span = document.createElement('span');
  span.setAttribute('class', 'label label-success');
  span.innerText = 'World';
  parent.appendChild(span);
}