Поменять местами два горизонтально выровненных элемента div

Я бы предпочел не удалять элементы div из DOM и снова добавлять их друг на друга. Это потому, что элементы на самом деле являются объектами Javascript (точнее, компонентами Google Closure Library), которые содержат переменные и имеют прикрепленные к ним обработчики событий.

Лучшее решение — вместо этого переместить элементы в DOM. Это сохранит существующие обработчики событий, а это значит, что ваш код все еще должен работать:

http://jsfiddle.net/thirtydot/LGGW2/

function swap() {
    var target1 = document.querySelector('#swapMe > :first-child');
    var target2 = document.querySelector('#swapMe > :last-child');

    var parent = target1.parentNode;
    parent.insertBefore(target1, null);
    parent.insertBefore(target2, parent.firstChild);
}​

Я предполагаю, что у вас уже есть ссылка на элементы, которые вы хотите поменять местами, поэтому вы можете заменить строки document.querySelector любым подходящим.

После написания этого ответа я искал более общую функцию «своп» и нашел это, которое выглядит хорошо: Поменять местами 2 элемента html и сохранить в них прослушиватели событий

В вашем HTML оба div одинаковы (style="float:left;"), нет class или id, поэтому вы можете поменять местами только HTML обоих div, т.е.

function swap(e)
{
    e  = e || window.event, target = e.target || e.srcElement;
    var nEl=getElem(target.parentNode, 'next');
    var pEl=getElem(target.parentNode, 'prev');
    var pElHtml=pEl.innerHTML, nElHtml=nEl.innerHTML;
    pEl.innerHTML=nElHtml;
    nEl.innerHTML=pElHtml;
}

function getElem(elem, which) {
    if(which==='next') which='nextSibling';
    else if((which==='prev')) which='previousSibling'; 
    do{
        elem = elem[which];
    }
    while (elem && elem.nodeType != 1);
    return elem;        
}​

ДЕМО.

У меня есть несколько решений вашей проблемы. Один или два связаны с вашим стилем. На вашем месте я бы удалил встроенные стили (если они не добавлены javascript) и добавил бы один и тот же класс ко всем «плавающим» элементам.

Для более обновленных браузеров это будет работать отлично:

.floaters{
    display:inline-block;
}

Но для более старых браузеров (например, 5.5, 6, 7, 8) вам нужно будет применить:

.floaters{
    display:inline;
    float:left;
    height:60px;/*set a default height*/
}

теперь для функции swap();. Я не уверен, как вы применяете это, но я бы поменял местами элементы, изменив их innerHTML();

function swap(){
    var ele1HTML = document.getElementById('ele1').innerHTML();
    var ele3HTML = document.getElementById('ele3').innerHTML();
    document.getElementById('ele1').innerHTML(ele3HTML);
    document.getElementById('ele3').innerHTML(ele1HTML);
}

Но следующий код потребует, чтобы вы добавили атрибуты ID в свои div. Вот пример:

<div id="menu">
  <div id="ele1" class="floater">
      Our Team
  </div>
  <div id="ele2" class="floater">
      <button onclick="swap();">swap home/away</button>
  </div>
  <div id="ele3" class="floater">
      <select>
          <option>Opponent A</option>
          <option>Opponent B</option>
      </select>
  </div>
</div>
<div id="anotherDiv"></div>

Но не забудьте повторно применить свои стили:

#menu{
    position:relative;
    height:60px; /*not needed for the older browser as I've set the child elements to 60px;*/
}
#anotherDiv{
    clear:both;
}