Как поменять элементы HTML в javascript?

Я использую классический Javascript для сценариев DOM, у меня есть набор DIV в контейнере DIV. В событии click дочернего 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

Ответы

Ответ 1

Этот код будет делать то, что вы хотите (если вы хотите поменять выбранный с помощью первого дочернего элемента). Если вам нужно что-то еще, вам нужно быть более точным.

<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>

Ответ 2

Свойство элемента parentNode предоставляет родительский элемент node. Элементы имеют функцию insertBefore, которая вставляет элемент перед другим ссылочным элементом (перемещая его, если он уже находится в другом месте дерева). И узлы имеют previousSibling, который дает вам предыдущий sibling node (который может быть или не быть элементом). Итак:

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 в IE).

Слегка OT, но могу ли я рекомендовать использовать любую из нескольких доступных библиотек, которые облегчат вашу жизнь, например Prototype, jQuery, Closure, или любой из нескольких других. Фактически, была ошибка в более ранней версии этого, потому что это было так давно, как я имел дело с DOM напрямую.: -)

Ответ 3

Из звуков этого вы в основном просто хотите поменять div на div перед ним, ergo с previousSibling. Возможно, вы можете посмотреть на insertBefore, но вместо создания нового элемента используйте существующий. Я не уверен, что произойдет с приложенными событиями, если они будут скопированы правильно.

Ответ 4

В принципе вы просто 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>

Ответ 5

Перемените любые узлы, а не братья и сестры, а не смежные братья и сестры, никакие временные узлы, не клонирование, не 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]);
}