Javascript 使用基于服务器数据的Jquery创建表单的最有效方法

我有一个通过jQueryAjax调用的数据库webmethod。这将从服务器返回一个数据对象数组。对于每个数据对象，我想用几十个字段填充一个表单

生成和填充这些表单的最有效方式是什么

现在，我在javascript代码中为每条记录创建一个html字符串，然后将其添加到页面中。然后我向新元素添加一些事件

这在firefox中可以正常工作，6个元素的数组总共大约700毫秒，30个元素的数组总共4500毫秒。然而，这是我公司的内部应用程序，客户只能在他们的机器上使用IE8。在IE8中，这需要2-10秒！对于长度为6秒和47秒的数组，它实际上能够完成长度为30秒的数组。不确定@#$%IE8在做什么，但无论如何。。。我需要更有效率的东西看起来

谢谢

更多信息：

编辑：我要做的第一件事是：

$("#approvalContainer").empty();

Web方法签名：

[WebMethod]
    public List<User> ContractorApprovals()

其中userForm是在displayUserResult函数中创建的div，userObject是ajax调用返回的数组中的对象之一

---

如果您需要更多信息，请告诉我。

您正在进行太多的DOM操作。循环中的每一个

.append

和

.find

和

.text

都会使循环变慢

最有效的方法是构建一个完整的HTML字符串并将其追加一次。我不想麻烦使用

displayUserResult

函数，只需修改处理数据的函数：

for (var i = 0; i < data.length; i++) {
            displayUserResult("#approvalContainer", data[i], false);
        }
        formEvents("#approvalContainer");
        $("#approvalContainer").show("slow");

var div = "<div style=\"width:695px\" class=...........",
    html = "";
for (var i = 0; i < data.length; i++) {
     // Keep adding on to the same html string
     html += div + data[i]._web._userName + "</div>";
}
// After the loop, replace the entire HTML contents of the container in one go:
$("#approvalContainer").html(html);

---

var div=”“当然。嗯，我将尝试删去一些简短而有意义的内容……这实际上取决于您如何使用ajax数据来确定如何填充表单。这里的逻辑是什么，JSON的格式是什么？@Nalum and Box-发布的附加信息是否有帮助？因此，与其使用elements类将数据插入表单，不如在创建表单时执行此操作。。。好啊这听起来很合理。我听过一些人提到在服务器上创建表单并发送到浏览器。这是怎么回事？这是我在这里想做的事吗？另外，我有几十个字段要和用户名一起填充。为什么firefox能够比IE8快这么多呢？它真的有那么多倍的效率吗？如果我需要在输入字段中输入值，我应该怎么做？我还必须在每个div中附加一个数据<代码>$（div）.data（…）

我应该怎么做？

$(userForm).find(".form-web-userName").text(userObject._web._userName);

var div = "<div style=\"width:695px\" class=...........",
    html = "";
for (var i = 0; i < data.length; i++) {
     // Keep adding on to the same html string
     html += div + data[i]._web._userName + "</div>";
}
// After the loop, replace the entire HTML contents of the container in one go:
$("#approvalContainer").html(html);