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

我正在做一些事情，其中​​多个函数会将各种事件侦听器添加到最初隐藏的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上，显示更改就会注册，否则保持隐藏状态。

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