您可以通过简单地使用after()代替append()来解决或至少避免问题:
$("li span").last().after("C");
$("li span").last().after("C");
$('#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;
}
A
此外,请注意我更正了您的HTML:只有当ul或ol的直接子项(它不应包含在任何其他元素中)时,li才有效.
此外,您可以使用更复杂的替代方案:
$("li").append("B").contents().filter(function(){
return this.nodeType === 3;
}).remove();
$("li").append("B").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;
}
A
虽然已经有一段时间了,但我认为值得添加以上的纯JavaScript版本:
let htmlToAppend = 'B',
span = document.querySelector('li span');
span.insertAdjacentHTML(
'afterend', htmlToAppend
);
document.querySelector('#generatedHTML').textContent = span.parentNode.innerHTML;
let htmlToAppend = 'B',
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;
}
A
参考文献:
> JavaScript:
> jQuery: