Javascript 添加方法似乎不起作用？

我不知道是否有人能解释这一点：

$(document).ready(function() {
        var popup = $('<div id="popup"><div class="popup-content"></div></div>');
        var popupContent = popup.children('div');
        var overlay = $('<div id="overlay"></div>');

        console.log(popup);
        console.log(popupContent);
        console.log(overlay);
        console.log(overlay.add(popup).appendTo('body'));
    });

$（文档）.ready（函数（）{
变量弹出=$（''）；
var popupContent=popup.children（'div'）；
var overlay=$（''）；
控制台日志（弹出窗口）；
console.log（popupContent）；
控制台日志（覆盖）；
console.log（overlay.add（popup.appendTo（'body'））；
});

我在那里添加了一些调试，以防您想要测试它

我不明白为什么在对包含两个元素的jQuery对象调用appendTo（）时，只追加覆盖

---

任何帮助都将不胜感激

我猜这与覆盖jQuery对象尚未添加到DOM有关。.add上的jquery文档显示：

“给定一个表示 一组DOM元素，.add（） 方法构造一个新的jQuery对象 从这些元素和 传递到方法中的对象。“-

您的覆盖还不是一组DOM元素。你能用append吗

overlay.append(popup).appendTo('body')

---

但我刚刚发现，从覆盖中删除id可以解决问题：

$(document).ready(function() {
        var popup = $('<div id="popup"><div class="popup-content"></div></div>');
        var popupContent = popup.children('div');
        var overlay = $('<div></div>');

        console.log(popup);
        console.log(popupContent);
        console.log(overlay);
        console.log(overlay.add(popup).appendTo('body'));
    });

$（文档）.ready（函数（）{
变量弹出=$（''）；
var popupContent=popup.children（'div'）；
var overlay=$（''）；
控制台日志（弹出窗口）；
console.log（popupContent）；
控制台日志（覆盖）；
console.log（overlay.add（popup.appendTo（'body'））；
});

我认为节点是否在DOM上并不重要，因为.add（）只是组合了两个jQuery对象

这毫无意义…

.add（）

不会修改现有对象，它会返回一个带有值的新对象。因此，您没有附加您认为是的对象

这部分代码不会修改覆盖对象：

overlay.add（popup）

相反，它创建了一个新对象，但由于没有对该新对象的引用，它会立即丢失--您无法使用它。覆盖对象本身保持不变

您应该这样做：

overlay = overlay.add(popup);
overlay.appendTo('body');

---

这很奇怪。如果您传递一个对象来设置ID，它就会工作<代码>var overlay=$（''，{id:'overlay'}）奇怪。是的，我也注意到，$（''），$（'div'，{id:'overlay'}）和$（''）的返回值肯定是相同的。。。jQuery对象。（除了最后一个之外，它没有ID属性）。这很奇怪。也许可以在jquery论坛上发表一篇帖子。听起来有点可怕…：/我在jQuery论坛上发布了一个更简单的版本：