jQuery：创建一个新的 DOM 元素并显示它

Posted 2023-05-09

【中文标题】jQuery：创建一个新的 DOM 元素并显示它

【英文标题】：jQuery: Creating a New DOM element and showing it

【发布时间】：2010-11-06 23:49:56

【问题描述】：

所以正如标题所示，我希望创建一个新的 dom 元素（html 是通过 AJAX 生成和检索的）。我有点让它工作，但它似乎被隐藏了，当我尝试淡入时它打破了！

   function AddContent(Content) 
        div = document.createElement(Content)
        div.appendTo($("#contentAreas"));
        //    $(div).fadeIn("slow");
        

它基本上将项目插入到正确的位置，但不显示它。当我尝试淡入它时，它没有这样做。没有错误。

有什么想法吗？

【问题讨论】：

你能描述得更详细些吗？ 如何打破？ “内容”是什么样的？ “#contentAreas”是什么样的？

另外，如果你这样做会发生什么： $("#contentAreas").append(div);

【参考方案1】：

应该是$(div).appendTo(...)。或者您可以将 div 的创建方式更改为 div = $(Content)，也许。

【参考方案2】：

不需要createElement，jQuery构造函数可以带html作为参数（假设content是html字符串）：

function AddContent(content) 
   var div = $(content);
   div.appendTo($("#contentAreas"));
   $(div).fadeIn("slow");

【参考方案3】：

这个怎么样：

   function AddContent(Content) 
        div = $('<div>' + Content + '</div>');           
        div.appendTo($("#contentAreas")).fadeIn("slow");
   

【参考方案4】：

div 必须是 jQuery 才能使 appendTo 工作。试试这个：

 function AddContent( content ) 
     $(content).appendTo("#contentAreas").fadeIn("slow");
 

【讨论】：

Damien，请注意 appendTo 需要一个选择器，因此您只需执行 .appendTo("#contentAreas")。无需无缘无故地创建另一个 jquery 对象

@redsquare -- 感谢您指出这一点。我已经更新，因为它使代码更干净。不过，在内部，我认为 appendTo 做的第一件事是 jQuery(selector)。

@tvanfosson -- 确实有助于节省一些按键操作！！

【参考方案5】：

appendTo 接受一个选择器，因此它不需要是一个 jquery 对象，因为上面的所有其他示例都有它。

function AddContent( content ) 
     $(content).appendTo("#contentAreas").fadeIn("slow");