js追加html 换行问题,使用jquery append()或html()时避免换行符

您可以通过简单地使用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：