Javascript 内存中的HTML元素以及将其插入DOM后的显示问题

当我们在Firefox下运行以下脚本时

var d = $("<div class='test'></div>");
d.hide();
$("body").prepend(d);
d.show();

vard=$（“”）；
d、 隐藏（）；
$（“正文”）。前置（d）；
d、 show（）；

。。。看看HTML，这个插入的元素将具有style属性：

style=“显示：块；”

在Webkit下，元素将具有：

style=“显示：无；”

这个场景在JavaScript组件中使用，我开发。该组件在其内部变量中有一组HTML元素，并将它们插入到指定的目标容器中

因为插入的元素在样式属性中初始化了显示属性，所以它会覆盖CSS。这会破坏页面的布局

作为一个快速解决方案，我可以在将元素插入DOM之前存储“style”属性，并且在插入之后，将存储的版本写入已创建的版本

有没有更好的解决办法

为什么会发生这种情况，我如何检查元素是否还没有插入到DOM中？

使用Chrome或Safari（两种基于WebKit的浏览器），如果我使用内置工具检查元素，它根本没有

样式。显示
属性，因此使用了
display:block
的默认
div
样式。（div中有一些文本，因此使用DOM检查器更容易查看和查找。）

所以我怀疑问题出在别处。例如，是否有可能在WebKit上失败的干预代码，因此
d.show（）永远不会被呼叫？这当然可以解释。使用Chrome或Safari中的内置工具，在创建div的代码上设置断点并遍历它非常容易

你的问题是：

…如何检查元素是否尚未插入到DOM

这个问题最近在StackOverflow上被问到，jQuery的一个具体答案相当优雅：

if (d.closest("body").length == 0) {
    // It's not in the DOM yet
}


更新：请在下面回复您的评论

使用Firefox查看此测试页面。div已明确定义“style=display:block；”。在Webkit下，它的样式属性为空。我在Firefox和Safari中使用内置的inspector

啊，好吧，问题不在于WebKit浏览器中的
display:none
（你在问题中关于这一点的陈述让我误入歧途），而是Firefox（可能还有其他Gecko浏览器）最终在元素上有
display:block

我可能会这样做：

var d = $("<div class='test'></div>");
d.addClass("hidden");
$("body").prepend(d);
d.removeClass("hidden");


这样，您就知道您最终不会得到
样式。display
属性集


更新2：您可以做的另一件事是删除
样式。直接显示
属性：

var d = $("<div class='test'>Hi there</div>");
d.hide();
$("body").prepend(d);
d.show();
d[0].style.display = "";

如果你这样做呢

var d = $("<div class='test'></div>");
d.hide();
$("body").prepend(d);
d.removeAttr('style'); // this will revert to the original styling

vard=$（“”）；
d、 隐藏（）；
$（“正文”）。前置（d）；
d、 removeAttr（'style'）；//这将恢复为原始样式
使用Firefox查看此测试页面。div已明确定义“style=display:block；”。在Webkit下，它的样式属性为空。我在Firefox和Safari中都使用了内置的检查器。@AntonAL:我明白你在说什么了。更新了答案。我对CSS效果也有同样的想法。它可以工作，但当我们执行removeClass（）时，将不会播放CSS动画。我们应该在一小段时间后，比如说，100毫秒后再做。谢谢@安东纳尔：我有另一个想法，在结尾添加了最后的更新。玩得高兴它可以工作，但不会恢复样式属性，而是将其清除。谢谢你，安东，真的。但是，由于代码仅通过
.hide（）
方法添加
显示：none
，因此删除style属性将返回到
.test
类指定的任何内容。
var d = $("<div class='test'>Hi there</div>");
d.hide();
$("body").prepend(d);
d.fadeIn(function() {
    this.style.display = "";
});

var d = $("<div class='test'></div>");
d.hide();
$("body").prepend(d);
d.removeAttr('style'); // this will revert to the original styling