Javascript 交换两个水平对齐的div

我在一条水平线上有以下DOM元素：

包含一行文本的div；i、 e.“你好，世界”。此div的宽度与包含文本的宽度相同

交换两个div的按钮

包含列表框的div。此div的宽度与包含列表框的宽度相同

使用

float

或

position:absolute

我可以在一行上正确对齐这些元素。但是，当用户单击交换按钮时，div应该交换位置。我不希望将div从DOM中移除，然后在彼此的位置上再次添加它们。这是因为这些元素实际上是Javascript对象（更具体地说是Google闭包库组件），它们包含变量并附加了事件处理程序。是否可以使用CSS交换div，而不为div指定静态宽度

简化示例：

<div style="position:relative; height:60px;">
  <div style="float:left;">Our Team</div>
  <div style="float:left;"><button onclick="swap();">swap home/away</button></div>
  <div style="float:left;"><select><option>Opponent A</option><option>Opponent B</option></select></div>
</div>
<div style="clear:both;"></div>

我们队
调回/离开
对手A对手B

---

当用户单击按钮时，第一个（我们的团队）和第三个（对手）div应该在浏览器中进行可视交换，最好不要从DOM中删除元素。

我有一些解决您问题的方法。一两个与你的风格有关。如果我是你，我会删除内联样式（除非由javascript添加），并向所有“浮动”元素添加相同的类

对于更新更多的浏览器，这将非常有效：

.floaters{
    display:inline-block;
}

但对于较旧的浏览器（ie5.5、6、7、8），您需要应用：

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

现在来看

swap（）函数。我不确定你是如何应用它的，但我会通过改变
innerHTML（）来交换元素

但是上面的代码要求您向div添加ID属性。下面是一个例子：

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

我有一些解决你问题的办法。一两个与你的风格有关。如果我是你，我会删除内联样式（除非由javascript添加），并向所有“浮动”元素添加相同的类

对于更新更多的浏览器，这将非常有效：

.floaters{
    display:inline-block;
}

但对于较旧的浏览器（ie5.5、6、7、8），您需要应用：

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

现在来看
swap（）函数。我不确定你是如何应用它的，但我会通过改变
innerHTML（）来交换元素

但是上面的代码要求您向div添加ID属性。下面是一个例子：

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

在您的
HTML
中，两个div都是相同的
（style=“float:left；”
，没有
类或
id
，因此您只能交换两个div的
HTML
，即

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;        
}​

.
在您的
HTML
中，两个div都是相同的
（style=“float:left；”
，没有
class
或
id
，因此您只能交换两个div的
HTML
，即

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;        
}​


我不希望将div从DOM中移除，然后在彼此的位置上再次添加它们。这是因为这些元素实际上是Javascript对象（更具体地说是Google闭包库组件），它们包含变量并附加了事件处理程序

最好的解决方案是移动DOM中的元素。这样做将保留现有的事件处理程序，这意味着您的代码仍然可以工作：


我假设您已经有了要交换的元素的引用，因此您可以用任何合适的内容替换
document.querySelector
行

写下这个答案后，我搜索了一个更通用的“swap”函数，找到了这个，看起来不错：

我不希望将div从DOM中移除，然后在彼此的位置上再次添加它们。这是因为这些元素实际上是Javascript对象（更具体地说是Google闭包库组件），它们包含变量并附加了事件处理程序

最好的解决方案是移动DOM中的元素。这样做将保留现有的事件处理程序，这意味着您的代码仍然可以工作：


我假设您已经有了要交换的元素的引用，因此您可以用任何合适的内容替换
document.querySelector
行

写下这个答案后，我搜索了一个更通用的“swap”函数，发现了这个，这看起来很好：
向我们展示你的代码你是如何准确地实现这些事情的………@ShailenderArora我添加了一个简化版本的HTML代码。向我们展示你的代码你是如何准确地实现这些事情………@ShailenderArora我添加了一个简化版本的HTML代码。不幸的是，这样做会搞乱绑定事件。单击“我们的团队”，然后单击交换，然后再次单击“我们的团队”：@thirtydot，你完全正确，但我认为没有这样的事件，所以我这样回答，但再次感谢和+1。不幸的是，这样做会把绑定事件搞砸。单击“我们的团队”，然后单击交换，然后再次单击“我们的团队”：@thirtydot，你完全正确，但我认为没有这样的事件，所以我这样回答，但再次感谢和+1。那么你只想交换元素一次？或者也更改按钮中的html？@Beneto每次用户单击按钮时，元素都会交换。元素本身以及元素内部的元素不能从DOM中删除，因为有/可以有事件处理程序附加到它们。在客户机内存中，变量与这些DOM元素相关联。如果删除此类元素的innerHTML，则必须在每个交换操作上重新分配这些变量和事件处理程序。另外，我在生产代码中不使用内联样式，但这是一种更简洁的代码显示方式。@Korneel哦，是的，我没有想到我只是交换子元素，从未想过触发它们。所以你只想交换元素一次？或者也更改按钮中的html？@Beneto每次用户单击按钮时，元素都会交换。元素本身以及其中的元素无法从DOM中删除，因为存在/可能存在事件h