blocks|key|564749|text|这在某种程度上取决于您的事件如何绑定到您要交换的元素。如果你正在使用jQuery，那么this+answer就是你需要的全部，真的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|564750|主要的事情不是对元素进行delete或removeChildnode，只需将html复制粘贴到其他地方即可。这样做，一些浏览器将清除所有资源(包括事件处理程序)，因此，绑定的事件将丢失。尽管IE在涉及动态绑定事件时因内存泄漏而臭名昭著。真的很难预测不同的浏览器会有什么样的表现。|style|CODE|564751|基本上，我要说的是:以任何您喜欢的方式交换元素，除了复制/粘贴HTML字符串，并使用jQuery的.live()方法绑定事件。因为我不认为1.5有.on方法|564752|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2943140/how-to-swap-html-elements-in-javascript^0|17|4|0|0|C|6|J|F|0|1D|7|21|3|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]|$A|Y|B|Z|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|10|8|@$A|11|B|12|F|G]|$A|13|B|14|F|G]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

This somewhat depends on how your events are bound to the elements you're swapping. If you're using jQuery, then <a href="https://stackoverflow.com/questions/2943140/how-to-swap-html-elements-in-javascript">this</a> answer is all you need, really. 

The main thing is not to <code>delete</code> or <code>removeChildnode</code> the elements, and just copy-paste the html elsewhere. In doing so, some browsers will clear all resources (event handlers included) so, bound events will be lost. Though IE is notorious for leaking memory when it comes to dynamically bound events. It's hard to predict how various browsers will behave, really. 

Basically, I'd say: swap elements in any way you like, except for copy/paste HTML strings, and bind your events using jQuery's <code>.live()</code> method. Since I don't think 1.5 has the <code>.on</code> method

blocks|key|564796|text|如果跟踪两个元素的parentNodes和一个元素的nextSibling，就可以在没有任何临时占位符的情况下交换两个元素及其子元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564797|如果第二个元素是唯一的子元素，或者是其父元素的最后一个子元素，则(正确地)将其替换附加到父元素。|564798|function+swap(a,+b){
++++var+p1=+a.parentNode,+p2=+b.parentNode,+sib=+b.nextSibling;
++++if(sib===+a)+sib=+sib.nextSibling;
++++p1.replaceChild(b,+a);
++++if(sib)+p2.insertBefore(a,+sib);
++++else+p2.appendChild(a);
++++return+true;
}|code-block|syntax|javascript|564799|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you keep track of the two elements' parentNodes and the nextSibling of one, you can swap two elements with their children without any temporary placeholders.

If the second element is an only child, or the last child of its parent, its replacement is (properly) appended to the parent.

<pre><code>function swap(a, b){
 var p1= a.parentNode, p2= b.parentNode, sib= b.nextSibling;
 if(sib=== a) sib= sib.nextSibling;
 p1.replaceChild(b, a);
 if(sib) p2.insertBefore(a, sib);
 else p2.appendChild(a);
 return true;
}
</code></pre>

blocks|key|564868|text|这是一个更简单的函数，用于交换两个元素，而不需要实际重新加载元素...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564869|function+swapElements(obj1,+obj2)+{
++++obj2.nextSibling+===+obj1
++++?+obj1.parentNode.insertBefore(obj2,+obj1.nextSibling)
++++:+obj1.parentNode.insertBefore(obj2,+obj1);+
}|code-block|syntax|javascript|564870|注:如果obj1具有像YouTube这样的嵌入式视频，则在交换时它将不会重新加载。它只是改变了元素的位置。|564871|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is a simpler function for swapping two elements without actually reloading the element...

<pre><code>function swapElements(obj1, obj2) {
 obj2.nextSibling === obj1
 ? obj1.parentNode.insertBefore(obj2, obj1.nextSibling)
 : obj1.parentNode.insertBefore(obj2, obj1); 
}
</code></pre>

Note: if the obj1 has an embedded video like YouTube, it will not reload when swapped.
It's just the position of the elements that changed.

blocks|key|348837|text|我的简单函数似乎是最短且兼容性最广的。它不需要占位符或重新加载元素或任何类似的杂乱操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348838|function+swapElements(el1,+el2)+{
++++var+p2+=+el2.parentNode,+n2+=+el2.nextSibling
++++if+(n2+===+el1)+return+p2.insertBefore(el1,+el2)
++++el1.parentNode.insertBefore(el2,+el1);
++++p2.insertBefore(el1,+n2);
}|code-block|syntax|javascript|348839|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My simple function seems to be the shortest and most widely compatible. It doesn't need placeholders or reload elements or anything messy like that:

<pre><code>function swapElements(el1, el2) {
 var p2 = el2.parentNode, n2 = el2.nextSibling
 if (n2 === el1) return p2.insertBefore(el1, el2)
 el1.parentNode.insertBefore(el2, el1);
 p2.insertBefore(el1, n2);
}
</code></pre>

blocks|key|348864|text|考虑到o1.swapNode(o2)；在IE中很长一段时间都工作得很好，这一切都很奇怪。在我的对象和文本节点混合的情况下，只有一个版本有效(已经在这里显示了)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348865|let+t+=+document.createElement("div");
o1.parentNode.insertBefore(t,+o1);
o2.parentNode.insertBefore(o1,+o2);
t.parentNode.insertBefore(o2,+t);
t.parentNode.removeChild(t);|code-block|syntax|javascript|348866|是的，我讨厌创建临时节点，但是如果你直接使用它(不调用函数)，上面没有这个技巧的版本就会失败。有时你不想调用一个函数。|348867|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This all is very strange considering the fact that o1.swapNode(o2); works very well in IE for very long time. In my case of object and text nodes intermixed, works only one version (already shown here):

<pre><code>let t = document.createElement("div");
o1.parentNode.insertBefore(t, o1);
o2.parentNode.insertBefore(o1, o2);
t.parentNode.insertBefore(o2, t);
t.parentNode.removeChild(t);
</code></pre>

Yes, I hate creating temporary node, but the above version without this trick fails if you use it straight (without calling function). Sometimes you don't want to call a function.

blocks|key|348876|text|如果要交换彼此相邻的元素，这真的很容易：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348877|<div+class="container">
+++<div+class="item">Item+1</div>
+++<div+class="item">Item+2</div>
</div>|code-block|syntax|javascript|348878|$('.container+.item:nth-child(2)').insertBefore('.container+.item:nth-child(1)');|offset|length|style|CODE|348879|entityMap^0|0|0|0|29|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

It's really easy if you're swapping elements next to each other:

<pre><code>&lt;div class="container"&gt;
 &lt;div class="item"&gt;Item 1&lt;/div&gt;
 &lt;div class="item"&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<code>$('.container .item:nth-child(2)').insertBefore('.container .item:nth-child(1)');</code>

There are similar questions, but all the answers are for swapping html elements only for the content inside.

I need to swap two divs, with lots of content in them (tables, select boxes, inputs, etc.).
The elements have event listeners on them, so I need to preserve them after swapping the main divs.

I have access to jQuery 1.5. So answers with it are OK.

Swap two html elements and preserve event listeners on them

jQuery

还有类似的问题，但所有的答案都是为了交换html元素，只交换里面的内容。我需要交换两个div，其中包含大量内容(表、选择框、输入等)。元素上有事件侦听器，所以我需要在交换主div之后保留它们。我可以访问jQuery 1.5。因此，它的答案是可以的。

问交换两个html元素并保留其上的事件侦听器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交换两个html元素并保留其上的事件侦听器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交换两个html元素并保留其上的事件侦听器
EN