Менять элементы DOM без потери новых строк

Question

Я не могу поменять элементы DOM и сохранить пробел / новую строку (и) между ними.

<div id="buttons">
    <button id="button-a">Button A</button>
    <button id="button-b">Button B</button>
</div>

<script>
    let buttons = document.querySelector('#buttons');
    let buttonA = document.querySelector('#button-a');
    let buttonB = document.querySelector('#button-b');

    buttons.insertBefore(buttonB, buttonA);

    setTimeout(function () {
        buttons.insertBefore(buttonA, buttonB);
    }, 1000);
</script>

ПРИМЕЧАНИЕ. Кнопки могут иметь от 0 до N новых строк после них.

Answer 1

$.fn.swap = function (el) {
  el = el.jquery ? el : $(el);
  return this.each(function () {
  $(document.createTextNode('')).insertBefore(this).before(el.before(this)).remove();
  });
};
$('input').click(function () {
  $('.one').swap('.two');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="click" />
<div id="buttons">
  <button class="one" id="button-a">A</button>
  <button class="two" id="button-b">B</button>
</div>

Answer 2

Это ожидаемое поведение из-за того, как символ пробела интерпретируется браузером.В вашем случае начальная раскладка кнопок имеет несколько пробелов, выглядит новыми строками.Браузер будет представлять все (новые строки, табуляции, пробелы) как один пробел.Вот почему вы видите некоторое начальное пространство между кнопками.

После изменения положения кнопок в DOM вы эффективно избавляетесь от этих пробелов.Следовательно, кнопки визуально соприкасаются друг с другом.

Простое решение - либо сохранить пробел между кнопками:

buttons.insertBefore(buttonA, buttonB);
buttons.insertBefore(document.createTextNode(' '), buttonB)

Или вы можете убедиться, что ваши кнопки применяют надлежащие поля CSS, чтобы символы пробела былипренебречь или не существует всех.Смотрите этот вопрос .