how to keep new lines after moving an element up and down

Question

in the example below click on dolor so it becomes active
then click on button - and dolor is moved up
but in the resulting html - the new line is missing

 $(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); let a = $('#awrap').html(); console.log(a); });

 .aact{background:orange;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="awrap" id='awrap'> <div class="ati">lorem</div> <div class="ati">ipsum</div> <div class="ati">dolor</div> </div> <button>CLICK</button>

result after button click:

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

what I need is:

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

how to get this?

Answer 1

Regarding the newline the OP wants to insert, it can be done by creating and inserting a text node like...

$(document.createTextNode('\n')).insertBefore(tgg);

... which changes the OP's code to...

 $(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); $(document.createTextNode('\n')).insertBefore(tgg); let a = $('#awrap').html(); console.log(a); });

 .aact { background: orange; }.as-console-wrapper { max-height: 110px;important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="awrap" id='awrap'> <div class="ati">lorem</div> <div class="ati">ipsum</div> <div class="ati">dolor</div> </div> <button>CLICK</button>

But the result still might not satisfy the OP since the OP wants/needs...

"[...] to save awrap html as a new file and want[s] to keep new lines just for better readability" .

The latter sounds more like a sanitizing tasks where a regex based approach might be suited best.

One would go for 2 text replacements where the first one matches any closing or empty tag including an optional trailing sequence of newline characters... /(<\/[^>]+>|<[^\/]+\/>)\n*/g ... and the second trims any leading sequence of newline characters... /^\n+/ ... from the markup string.

 $(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); let a = $('#awrap').html().replace(/(<\/[^>]+>|<[^\/]+\/>)\n*/g, '$1\n').replace(/^\n+/, ''); console.log(a); });

 .aact { background: orange; }.as-console-wrapper { max-height: 110px;important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="awrap" id='awrap'> <div class="ati">lorem</div> <div class="ati">ipsum</div> <div class="ati">dolor</div> </div> <button>CLICK</button>