如何在使用jQuery移动元素后保留HTML中的换行符？

问题出在使用insertBefore移动DOM元素时，元素之间的空白换行（DOM中的文本节点）没有被保留，导致最终获取的HTML结构里相邻元素挤在一起。

只需在移动元素后，手动给被移动的元素添加一个换行文本节点即可：

$(document).on('click', '.ati', function(){
    $('.aact').removeClass('aact');
    $(this).addClass('aact');
});

$('button').on('click', function(){
    let tg = $('.aact');
    if(tg.length == 0){alert('TITLE IS NOT SELECTED');return;}
    let tgg = tg.prev();
    tg.insertBefore(tgg);
    // 给移动后的元素添加换行文本节点
    tg.after('\n');
    let a = $('#awrap').html();
    console.log(a);
});

修改说明 #

• 在执行insertBefore移动元素后，通过tg.after('\n')在被移动的激活状态.ati元素后面插入一个换行文本节点，确保它和下一个元素之间存在换行分隔。

执行修改后的代码，点击按钮后输出的HTML结构将符合期望：

<div class="ati">lorem</div>
<div class="ati aact">dolor</div>
<div class="ati">ipsum</div>

内容的提问来源于stack exchange，提问作者provance