如何在js中消除标签之间空白符号？

Question

我打算用js添加一个紧贴着前一个內联元素的span标签，但是添加之后发现中间有空白字符。

这是html代码：

  <div>
    <span>123456</span><span>|</span>
  </div>
  <div>
    <span id="test">123456</span>
  </div>

这是js：

var test = document.getElementById('test');
var cursor = document.createElement('span');
cursor.textContent = "|";
test.parentNode.appendChild(cursor);

and 效果：

问题是，要怎么消除空白？或者说，要怎么添加才不会有空白？

Answer 1

内联元素是会有这种情况出现的，解决办法有两个
1、用浮动，float:left
2、用flex，flex布局可以解决内联元素间的空格问题

Answer 2

你指的是6与|之间的空白？

Answer 3

<div>
    <span>123456</span><span>|</span>
  </div>
  <div><span id="test">123456</span></div>
  
  
  
var test = document.getElementById('test');
var cursor = document.createElement('span');
cursor.textContent = "|";
test.parentNode.appendChild(cursor);

Answer 4

将数字和'|'写到同一个span里面不挺好的，

Answer 5

我在做下拉多选时也遇到了这个问题，明早看过代码来回答你