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

起初我在我的DOM中有这个：

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

当我这样做：

$( “里”)附加( “<跨度> B< /跨度>” 中);

以下是我查看DOM时得到的内容：

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

但我想拥有

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

我需要在同一行显示跨度,以避免在两个元素之间显示空白.

使用javascript innerHTML,问题与jQuery使用append和html函数相同.

Here is a jsFiddle

谢谢您的帮助

解决方法

您可以通过简单地使用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：只有当ul或ol的直接子项(它不应包含在任何其他元素中)时,li才有效.

此外,您可以使用更复杂的替代方案：

$("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>',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()

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

解决方法

猜你在找的jQuery相关文章