交换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。