使用 jquery append() 或 html() 时避免换行

Question

起初我的 DOM 中有这个：

<li>
  <span>A</span>
</li>

当我这样做时：

$("li").append("<span>B</span>");

如果我查看 DOM，这就是我得到的结果：

<li>
  <span>A</span>
  <span>B</span>
</li>

但我想拥有

<li>
   <span>A</span><span>B</span>
</li>

我需要在同一行显示 span 以避免在两个元素之间显示空白。

使用 javascript innerHTML，问题与 jQuery 相同，用于 append 和 html 函数。

Here is a jsFiddle

感谢您的帮助

Answer 1

您可以通过简单地使用after() 代替append() 来解决或至少避免该问题：

$("li span").last().after("<span>C</span>");

$("li span").last().after("<span>C</span>");
$('#generatedHTML').text($('li').html());

#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}
#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

另外，请注意我更正了您的 HTML：li 仅在 ul 或 ol 的直接子代有效（不应包含在 任何其他元素）。

此外，您可以使用更复杂的替代方法：

$("li").append("<span>B</span>").contents().filter(function(){
    return this.nodeType === 3;
}).remove();

$("li").append("<span>B</span>").contents().filter(function(){
    return this.nodeType === 3;
}).remove();
$('#generatedHTML').text($('li').html());

#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}
#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

虽然已经有一段时间了，但我认为还值得添加上面的纯 JavaScript 版本：

let htmlToAppend = '<span>B</span>',
  span = document.querySelector('li span');

span.insertAdjacentHTML(
  'afterend', htmlToAppend
);
document.querySelector('#generatedHTML').textContent = span.parentNode.innerHTML;

let htmlToAppend = '<span>B</span>',
  span = document.querySelector('li span');

span.insertAdjacentHTML(
  'afterend', htmlToAppend
);
document.querySelector('#generatedHTML').textContent = span.parentNode.innerHTML;

#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}

#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}

<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

参考资料：

• JavaScript：
  • document.querySelector()。
  • Element.innerHTML。
  • Element.insertAdjacentHTML()。
  • let statement。
  • Node.nodeType。
  • Node.textContent。
• jQuery:
  • after()。
  • append()。
  • contents()。
  • filter()。
  • last()。
  • remove()。

Answer 2

因此，答案是您在源代码中看到的情况并非如此：只有一行或几行标记，它们都由浏览器实现为相等的 DOM。空白问题可能是由错误的样式引起的。所以，我建议你先检查一下。