在jquery中动态添加一个div元素答案

【问题标题】：Dynamically adding a div element in jquery在jquery中动态添加一个div元素
【发布时间】：2010-07-17 05:02:24
【问题描述】：

我使用以下函数在从我的 asp.net 页面提交表单后显示状态消息。该函数被调用但它（alertmsg div）似乎没有显示为什么？

 function topBar(message) {
        var $alertdiv = $('<div id = "alertmsg"/>');
        $alertdiv.text(message);
        alert($alertdiv);
        alert($alertdiv.text(message));
        $alertdiv.click(function() {
            $(this).slideUp(200);
        });
        $(document.body).append($alertdiv);
        setTimeout(function() { $alertdiv.slideUp(200) }, 5000);
    }

发生的情况是两个警报语句都显示[Object object]...我认为两者都需要显示不同的输出...任何建议..

css：

#alertmsg
{
  font-family:Arial,Helvetica,sans-serif;
   font-size:135%;
   font-weight:bold;
  overflow: hidden;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #404a58;
  height: 0;
  color: #FFFFFF;
  font: 20px/40px arial, sans-serif;
  opacity: .9;
}

【问题讨论】：

一般来说，使用alert 是一种调试Javascript的垃圾方式。查看Firebug，您会更好地了解发生了什么。

标签： jquery html append document-body

【解决方案1】：

您正在警告 jQuery 对象。尝试将警报更改为： alert($alertdiv.get(0).innerText);

除此之外，您的 div 可能不会显示，因为您在将 div 元素添加到页面之前添加了点击事件。

尝试改变：

$alertdiv.click(function() {
            $(this).slideUp(200);
        });

收件人：

$alertdiv.bind('click', function() {
            $(this).slideUp(200);
        });

甚至：

$alertdiv.live('click', function() {
            $(this).slideUp(200);
        });

我认为这可能是绑定动态生成元素的唯一方法。我从未在文档就绪功能之外尝试过.click()。

编辑：除了上面对 jQuery 的建议之外，您的 css 应该更改为指定 div 的高度。您的高度为 0 将导致它在技术上渲染，并可能向上滑动。但是，您将无法看到它，因为它在点 0,0 处的高度为 0 像素。

【讨论】：

【解决方案2】：

alert($alertdiv.text(message));还将 $alertdiv 的文本设置为 messasge 并返回 $alertdiv 以支持 jQuery 的链接。您正在寻找的是 $alertdiv.text()，它将返回 $alertdiv 中的文本。

另外，您为什么要动态创建该 div？是否有任何理由不能将它放在页面上并通过 slideUp()/slideDown() 隐藏/显示它？

【讨论】：

+1 表示.text()。我通常会尝试避免从 html 元素中检索 .text() 和 .html()（因此忘记它们的存在），因为它们可以很容易地更改为返回 jQuery 对象的赋值函数。此外，动态添加 div 的一个原因是避免在屏幕阅读器或基于文本的浏览器等辅助设备上出现错误确认。

【解决方案3】：

要动态插入<div>，您可以使用它

$('<div>Test</div>').insertAfter('.inner'); //插入到具有内部类的元素之后

或更好

$("#myparent").html("<div id='mynewdiv'>hi</div>");

【讨论】：