jQuery用ID创建新的div？答案

【问题标题】：jQuery create new div with ID?jQuery用ID创建新的div？
【发布时间】：2011-07-15 22:22:27
【问题描述】：

我的 ASP.NET masterPage.master 中有表单，如果我点击提交，它会通过 ajax 从 masterPage.master.cs 文件中调用一些方法（我在更新面板中有）。但我想用 jQuery 改进它。所以我有这个：

$('#submit').click(function () {
            $.ajax({
                type: "POST",
                url: '<% Response.Write("~"+Request.Path); %>',
                beforeSend: function () {
                    $(document.createElement('div')).width($('#formBox').width())
                    .height($('#formBox').height())
                    .css({ backgroundImage: 'url(/Static/Img/bc_overlay.png)', position: 'absolute', left: 0, top: 0, margin: "5px", textAlign: "center", color: "#000", display: "none" })
                    .append("<strong>Načítám</strong><br /><img src='Static/Img/ajax-loader.gif' width='33px' height='33px' alt='loading' />")
                    .fadeIn("slow")
                    .prependTo($('#formBox'));
                    $('#formBox').css('position', 'relative');
                },
                success: function () {
                }
            });
        });

所以如果我点击提交，新的 div 正在创建（有加载文本和图像，以及很酷的不透明度覆盖），但是 我如何给这个 div 一些 ID？ 因为我需要使用它在

success: function () {
                    }

我需要清除此框并在此处写一些文本（错误或成功）。

【问题讨论】：

标签： jquery asp.net ajax html

【解决方案1】：

在创建时设置属性

$(document.createElement('div')).attr('id', 'theID')//rest of code

【讨论】：

欢迎来到 SO！如果这解决了您的问题，请将问题标记为“已回答”，以便对其他人有所帮助。使用左边的大勾号：stackoverflow.com/faq#howtoask

【解决方案2】：

我喜欢这样创建元素：

    $('<div/>',{
        id: 'idhere',
        css:{
            width: $('#formBox').width(),
            height: $('#formBox').height()
        }
    });

等等……

供参考 - 一些属性具有保留字/名称（请参阅MDN Reserved Words），因此如果您想指定一个类，您需要包装属性名称：

        $('<div/>',{
            id: 'idhere',
            'class':'myclassname',
            css:{
                width: $('#formBox').width(),
                height: $('#formBox').height()
            }
        });

您当然可以为这个新元素指定一个名称，并在进行过程中对其进行更改...

var div = $('<div/>',{
                id: 'idhere',
                'class':'myclassname',
                css:{
                    width: $('#formBox').width(),
                    height: $('#formBox').height()
                }
            });

$(div).prop('name','saymyname');

【讨论】：

保留关键字的信息很有帮助！！

【解决方案3】：

所有答案都是有效的。

另一种方式：

HTML

<div id='container'></div>

JQuery

$('#container').append("<div id=\"id\"></div>");

或者：

 $('#container').append(createDiv('id', 'class'));

 var createDiv = function(newid, newclass) {
    return $('<div/>', {
              id: newid,
              class: newclass,
              css:{
                 width: "100px",
                 height: "100px"
              }
            });
 }

【讨论】：

【解决方案4】：

我没有完全理解您创建的设置。

success函数实际上是用3个参数调用的。

success : function( data, textStatus, jqXHR ) {
}

您可以放心地忽略 textStatus 和 jqXHR 并直接编写

success : function( data ) {
}

数据元素是您从 ajax 调用返回的结果。您可以在该数据中搜索以获取所需的 ID。

另一种选择是通过简单的插入或追加调用从 jQuery 创建 div 并在脚本中创建 id。（也许使用日期和时间是唯一的，或者只是获取最高的 id 并增加一个计数器）然后，您可以通过调用 jquery 来加载要放入 div 的 html。

【讨论】：