如何交換javascript中的HTML個元素？

Question

我正在為 DOM 腳本使用經典的 Javascript，我在容器 DIV 中有一組 DIV。 在子 DIV 的點擊事件中，我希望導致事件的子 DIV 與其上方的 DIV 交換。我的代碼在這里。

 <div id="container">
        <div onclick="swapDiv(event);">1</div>
        <div onclick="swapDiv(event);">2</div>
        <div onclick="swapDiv(event);">3</div>
 </div>

如果點擊了 DIV 2，它應該與 DIV 1 交換

Answer 1

元素的parentNode屬性為您提供其父節點。 元素有一個insertBefore函數，它在另一個引用元素之前插入一個元素（如果它已經在樹的其他地方，則移動它）。 節點有一個previousSibling ，它為您提供前一個兄弟節點（可能是也可能不是元素）。 所以：

function swapDiv(elm) {
    var previous = findPrevious(elm);
    if (previous) {
        elm.parentNode.insertBefore(elm, previous);
    }
}

...其中findPrevious看起來像這樣：

function findPrevious(elm) {
   do {
       elm = elm.previousSibling;
   } while (elm && elm.nodeType != 1);
   return elm;
}

...您的onclick屬性應該是：

onclick="swapDiv(this);"

...盡管您可能想要查看 DOM2 事件掛鈎（ addEventListener或attachEvent上的attachEvent ）。

有點過時，但我可以推薦使用幾個可用的庫中的任何一個來讓你的生活更輕松，比如Prototype 、 jQuery 、 Closure或其他幾個庫中的任何一個。 事實上，在這方面的一個早期版本的錯誤，因為它一直是長久以來我會直接處理的DOM。 :-)

Answer 2

此代碼將執行您想要的操作（如果您想將所選元素與第一個子元素交換）。 如果你想要別的東西，你需要更精確。

 <script type="text/javascript"> function swapDiv(event, elem) { elem.parentNode.insertBefore(elem, elem.parentNode.firstChild); } </script> <div id="container"> <div onclick="swapDiv(event,this);">1</div> <div onclick="swapDiv(event,this);">2</div> <div onclick="swapDiv(event,this);">3</div> </div>

Answer 3

交換任何節點，不是兄弟姐妹，不是相鄰兄弟姐妹，沒有臨時節點，沒有克隆，沒有 jquery... IE9+

function swapNodes(n1, n2) {

    var p1 = n1.parentNode;
    var p2 = n2.parentNode;
    var i1, i2;

    if ( !p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1) ) return;

    for (var i = 0; i < p1.children.length; i++) {
        if (p1.children[i].isEqualNode(n1)) {
            i1 = i;
        }
    }
    for (var i = 0; i < p2.children.length; i++) {
        if (p2.children[i].isEqualNode(n2)) {
            i2 = i;
        }
    }

    if ( p1.isEqualNode(p2) && i1 < i2 ) {
        i2++;
    }
    p1.insertBefore(n2, p1.children[i1]);
    p2.insertBefore(n1, p2.children[i2]);
}

Answer 4

從它的聲音來看，您基本上只想將 div 與其之前的 div 交換，因此與previousSibling交換。 您可能會考慮執行insertBefore但不要使用現有元素創建新元素。 我不確定附加的事件會發生什么，如果它們被正確復制。

Answer 5

原則上，您只需在單擊的元素之前insertBefore之前的同級元素。 然而，空白文本節點的存在使得它比傳統腳本中更煩人。 元素遍歷 API將使這更容易，但在瀏覽器更廣泛地支持它之前，輔助函數是必要的，例如：

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<script type="text/javascript">
    // Bind event to each line div
    //
    var div= firstElementChild(document.getElementById('container'));
    while (div!==null) {
        div.onclick= swapWithPreviousElement;
        div= nextElementSibling(div);
    }

    // Move element before its previous element sibling
    //
    function swapWithPreviousElement() {
        var previous= previousElementSibling(this);
        if (previous!==null)
            this.parentNode.insertBefore(this, previous);
    }


    // We've used some Element Traversal API methods but some
    // browsers don't support them yet. Provide wrapper functions
    // for compatibility.
    //
    function previousElementSibling(element) {
        if ('previousElementSibling' in element)
            return element.previousElementSibling;
        do
            element= element.previousSibling;
        while (element!==null && element.nodeType!==1);
        return element;
    }
    function nextElementSibling(element) {
        if ('nextElementSibling' in element)
            return element.nextElementSibling;
        do
            element= element.nextSibling;
        while (element!==null && element.nodeType!==1);
        return element;
    }
    function firstElementChild(element) {
        if ('firstElementChild' in element)
            return element.firstElementChild;
        var child= element.firstChild;
        while (child!==null && child.nodeType!==1)
            child= child.nextSibling;
        return child;
    }
</script>

Answer 6

這適用於兄弟姐妹，應該適用於任何兩個節點：

function swapElements(el1, el2) {
    let prev1 = el1.previousSibling;
    let prev2 = el2.previousSibling;

    prev1.after(el2);
    prev2.after(el1);
}

Answer 7

你可以像這樣交換一個 DOM 元素和它之前的兄弟元素：

el.parentNode.insertBefore(el, el.previousElementSibling);