克隆后Javascript无法取消隐藏元素？

House3272 发表于 Dev

房屋3272

我正在做一些事情，其中多个函数会将各种事件侦听器添加到最初隐藏的div中，我们称之为它secretBlock。在任何给定时间点只有一个处于活动状态，但是所有上述功能将通过以下方式对其进行操作：

首先克隆sercetBlock以确保没有以前的侦听器仍被连接
然后将显示设置为 flex

HTML：

<div id="secretBlock" hidden>Secret</div>

JavaScript：

function exampleFuction() {
    var secretBlock = document.getElementById('secretBlock');
    var secretClone = secretBlock.cloneNode(true);
    secretBlock.parentNode.replaceChild(secretClone, secretBlock);
    secretBlock.style.display = 'flex';
    ....
 }

但是最后一部分（设置显示）没有触发。

我以为这与异步性有关，但是

setTimeout(function(){ secretBlock.style.display = 'flex' }, 999);

也没有效果。

但是，其中一个函数会在设置显示后立即将div附加到另一个div内，从而导致其正常触发：

secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock.style.display = 'flex';
otherDiv.appendChild(secretBlock);

经过一些测试，我发现设置显示（现在还是以后）或在代码中的位置都没关系，只要secretBlock将其附加到另一个div上，显示更改就会注册，否则保持隐藏状态。

.......这让我对正在发生的事情一无所知，因此，任何见识都将不胜感激~~

房屋3272

是参考问题。
经过.replaceChild()内容替换secretBlock，最初的参考：

var secretBlock = document.getElementById('secretBlock')

变得过时，因为它仍然指向旧的原始元素，该元素不再与html文档分离。因此，您需要将引用重定向到克隆的元素：

secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock = document.getElementById('secretBlock');
secretBlock.style.display = 'flex';

谢谢Dr.Molle！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。