交换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边距，以便忽略空格字符或不完全保留空格字符。参见此question。