bootstrap label class

最新推荐文章于 2023-06-20 11:33:22 发布

原创最新推荐文章于 2023-06-20 11:33:22 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

12 篇文章

订阅专栏

bootstrap

4 篇文章

订阅专栏

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

想要用 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);
}

研究半天才发现 js 生成的 html 的各个 world 间缺少个 textnode

修正后代码就得到预期的效果了

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);
  var text = document.createTextNode(' ');
  parent.appendChild(text);
}