在不丢失新行的情况下交换 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 边距，以便忽略空白字符或不存在所有空白字符。 看到这个问题。