起初我的 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 函数的问题相同。
谢谢你的帮助
最佳答案
您可以通过简单地使用 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:
- jQuery:
关于jquery - 使用 jquery append() 或 html() 时避免换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15513867/