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

时间:2013-03-20 01:47:47

标签: jquery html append line-breaks

起初我在我的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用于追加和html函数的问题相同。

Here is a jsFiddle

感谢您的帮助

2 个答案:

答案 0 :(得分:10)

您只需使用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:当liul的直接子项时,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>

参考文献:

答案 1 :(得分:1)

所以,答案是没有你在源代码中看到的情况:唯一的行或几行标记,它们都由浏览器实现为相等的DOM。白色空间问题可能由错误的样式引起。所以,我建议你先检查一下。