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

Question

起初，我的文档对象模型（DOM）中有以下内容：

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

当我执行以下代码：

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

如果我查看DOM，会得到以下结果：

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

But I would like to have

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

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

使用javascript innerHTML时，问题与jQuery在append和html函数中使用它是相同的。

这里有一个jsFiddle

感谢您的帮助。

- Nicolas Forney

---

如果您使用Firebug查看源代码，您会发现它的格式与您的第一个示例相同。 - darshanags

你确定这样做时会出现一个空格吗？ - Ja͢ck

似乎使用.append是正常工作的：http://jsfiddle.net/ExplosionPIlls/LZy6L/ - Explosion Pills

没有换行，这只是您的源代码查看器为了可读性而格式化的方式。 - ahren

两种情况的输出相同 - btevfik

我在发布问题时犯了一个错误。我试图将一个 span 添加到已经包含另一个 span 的 li 中。我添加了一个 jsFiddle。 - Nicolas Forney

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 语句。
  • Node.nodeType。
  • Node.textContent。
• jQuery：
  • after()。
  • append()。
  • contents()。
  • filter()。
  • last()。
  • remove()。

- David Thomas

---

非常感谢您，我很高兴能够帮助到您！=) - David Thomas

我喜欢引用 :) 即使它看起来比以前有点奇怪，但它完全有意义并且像魅力一样工作。 - flu

Answer 2

所以，答案是在源代码中你看到的只有一行或几行标记，它们都被浏览器实现为相等的DOM。空格问题可能是由错误的样式引起的。所以，我建议你首先检查它们。

- Boris Zagoruiko

---

我已经检查了空格问题并找到了不同的解决方案。更好的方法是将span放在同一行上。似乎没有CSS解决方案是跨浏览器的（不使用某些浏览器的hack）。 - Nicolas Forney

这并不是真的。行内元素之间的空格（包括换行符）会在渲染HTML时产生空格。虽然有一些解决方法，但大多数需要控制HTML源代码，所以提问者的观点是正确的。 - flu