如何交换2个html元素并保存事件监听器?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (117)

我需要交换两个div与大量的内容(表格,选择框,输入等)与事件监听器上的元素等。

提问于
用户回答回答于

要交换两个div而不丢失事件处理程序或打破DOM引用,你可以将它们移动到DOM中。关键是不要改变innerHTML,因为从头开始重新创建新的DOM节点,并且这些DOM对象上的所有事件处理程序都丢失了。

但是,如果你只是将DOM元素移动到DOM中的新位置,则所有事件都将保持连接状态,因为DOM元素仅在不更改DOM元素本身的情况下重新进行重新设置。

这是一个快速的功能,可以交换DOM中的两个元素。它应该与任何两个因素一起工作,只要一个不是另一个:

function swapElements(obj1, obj2) {
    // create marker element and insert it where obj1 is
    var temp = document.createElement("div");
    obj1.parentNode.insertBefore(temp, obj1);

    // move obj1 to right before obj2
    obj2.parentNode.insertBefore(obj1, obj2);

    // move obj2 to right before where obj1 used to be
    temp.parentNode.insertBefore(obj2, temp);

    // remove temporary marker node
    temp.parentNode.removeChild(temp);
}

这是一个没有插入临时元素的版本:

function swapElements(obj1, obj2) {
    // save the location of obj2
    var parent2 = obj2.parentNode;
    var next2 = obj2.nextSibling;
    // special case for obj1 is the next sibling of obj2
    if (next2 === obj1) {
        // just put obj1 before obj2
        parent2.insertBefore(obj1, obj2);
    } else {
        // insert obj2 right before obj1
        obj1.parentNode.insertBefore(obj2, obj1);

        // now insert obj1 where obj2 was
        if (next2) {
            // if there was an element after obj2, then insert obj1 right before that
            parent2.insertBefore(obj1, next2);
        } else {
            // otherwise, just append as last child
            parent2.appendChild(obj1);
        }
    }
}

热门问答

关于Linux DNS服务器设置问题?

mariolu

腾讯 · 后台开发工程师 (已认证)

CDN及云从业者
推荐

CNAME到XX.com,这个XX.COM本身也是需要能解析ip的。CNAME到XX.COM的意义是你能解析到CDN厂商A的域名XX.COM或者CDN厂商B的域名YY.COM。所以需要提供服务的CDN厂商给你他们的域名。这样,DNS查询链路才是完整的。

两台腾讯云的服务器在同一个地区,内网网段也相同,都是172.17.0.X,为啥ping内网地址不通?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐已采纳

首先看下两台机器是否在同个vpc内,在同个vpc内默认网络可以互通,如果不在同个vpc内需要通过对等连接或者云联网打通,如果在同个vpc下无法互通,请检查下安全组和os的防火墙规则,放行icmp连接。

云服务器不能访问外部网站?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐
不能访问外部网站一般是网络和dns的问题,按照如下步骤排查: 1. 确保CVM有外网ip或者NAT转换,使用ping测试下外网的连通性,如果不通请购买弹性公网IP,先申请后购买参考https://cloud.tencent.com/document/product/215/201...... 展开详请

我刚申请的服务器,缺省给我的是linux,可我要Windows,怎么办?

蒋小爱

腾讯云 · 技术支持 (已认证)

推荐
云服务器提供 不同平台重装:仅支持中国大陆地区(不含中国香港)。 例如,Linux 重装为 Windows,Windows 重装为 Linux 。 参考 重装系统: https://cloud.tencent.com/document/product/213/4933 图片.p...... 展开详请

合作伙伴学院里的学习视频测试题和在线培训系统里的测试题能否提供答案?

骑牛看晨曦love&peace~
推荐

http://tencentcloudxuexi.com 合作伙伴可以登录此平台做练习题,有答案的喔

求问keil5项目无法下载到开发板该怎么解决?

Supowang

腾讯 · 高级工程师 (已认证)

腾讯物联网操作系统TencentOS tiny产品接口人---岁寒知松柏,做最好的自己!
推荐
请检查st-link的驱动和stlink硬件,如果不行,尝试换其他stlink下载器试试,谢谢! 如果还没有解决,请加TencentOS tiny官方QQ群提问,谢谢! qq.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券