Javascript 使用ID交换两个DIV的位置

我试图更改jquery中两个DIV的位置，似乎我有点困惑，因为它已经在交换位置了，但当它这样做时，它会复制字段

我尝试使用insertBefore和insertAfter

<div id="before_stops">                                         
   <li><span><img src="<?php echo base_url('assets/images/multi_stops.png') ?>" width="18px"height="18px"/></span>                                             
          <div class="verticalLine"></div>                                         
            <span class="text multi_non_append_stops"></span>                                               
             <br><br>                                            
    </li>                                    
 </div>                                         

“width=“18px”height=“18px”/>

“width=“18px”height=“18px”>

以下是我的javascript代码：

for (var i = 0; i < data.stops.length; i++) {
  if(value == "A" || value == "B"){
                        $('#multi_stops').insertBefore($('#before_stops'));
                        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
}else{
                        $('#multi_stops').insertAfter($('#before_stops'));
                        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
                    }
                }

for（变量i=0；i'+data.stops[i].stopDestination+“

”）；
}否则{
$（'multi#u stops'）。插入后面（$（'multi#u stops'）；
$（'.multi'）.append（'
'+data.stops[i].stopDestination+“

”）；
}
}

正在发生的事情不是有一个

如果值为

A

或

B

应该是

但发生在我身上的是

如果值不是

A

或

B

应该是

但正在发生的是

---

它是复制品。我在这里做错了什么。

您需要复制元素，在之后插入，然后删除第一个元素。否则你会得到重复的结果。您可以使用jquerys方法。它删除对象，但保留数据。像这样使用它：

for (var i = 0; i < data.stops.length; i++) {
    if (value == "A" || value == "B") {
        $('#multi_stops').detach().insertBefore($('#before_stops'));
        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
    } else {
        $('#multi_stops').detach().insertAfter($('#before_stops'));
        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
    }
}

for（变量i=0；i'+data.stops[i].stopDestination+“

”）；
}否则{
$（“#多个#停止”）.detach（）.insertAfter（$（“#在#停止之前”）；
$（'.multi'）.append（'
'+data.stops[i].stopDestination+“

”）；
}
}

试试这个：

<div class="holder">
    <div id="before_stops"> 
    </div>
    <div id="multi_stops">  
    </div>
</div>

if(value == "A" || value == "B"){
    $("#before_stops").appendTo(".holder");
}else{
    $("#multi_stops").appendTo(".holder");
}

如果（值==“A”| |值==“B”）{
美元（“#在#停止前”）。附于（“.holder”）；
}否则{
美元（“#多站”）。附于（“.holder”）；
}

---

实例：

您能否创建一个可运行的代码段来演示该问题？事实上，这可能是由您的HTML造成的。它的可能副本仍在复制：（谢谢！此解决方案有效！非常感谢先生！

<div class="holder">
    <div id="before_stops"> 
    </div>
    <div id="multi_stops">  
    </div>
</div>

if(value == "A" || value == "B"){
    $("#before_stops").appendTo(".holder");
}else{
    $("#multi_stops").appendTo(".holder");
}