如何使用JavaScript和Firefox附加SDK动态添加HTML元素

我正在用FirefoxSDK开发一个简单的插件，允许用户查看存储的数据。 我想在一个带有表格的面板中显示项目。该表是使用从数据库传入的数据动态创建的。首先，在JavaScript代码中，我创建带有属性的项，然后创建一个表，将属性作为行，并使用每个属性的值附加这些项

我有一些问题：表中只有项的名称作为第一行，属性名称作为第一列，而单元格中没有值。代码似乎没有按顺序执行，但似乎先执行速度更快的函数

代码如下：

       self.on('message', function() {
        var container = $('#container');
        container.empty();
        items = [];
        self.port.emit('getItem');
    });

    self.port.on('items', function(response) {
        var ok = 0;
        var items = [];
        var table = $('#tableContainer #table').clone();
        var container = $('#container');

        table.append("<tr id=first><th>    </th></tr>");
        var json = eval('('+ response + ')');
        for (var i = 0, len = json.length; i < len; ++i) {
            var item = {
                id: json[i],
                properties: []
            };
            items.push(item);
        }
        items.forEach ( function(item) {    
            table.find('#first').append("<th id="+item.id+">"+item.id+"</th>");

            self.port.emit('detailsItem', item.id);
            self.port.on('details'+item.id,  function(response) {
                var details = eval('('+ response + ')');
                var description = [];
                ndet = details.length;
                var len = details.length;
                for (var i = 0; i < len;) {
                    var detail = {
                        dimension : details[i].dimension,
                        value : details[i].value
                    }
                                    description.push(detail);
                    ++i;
                }
                item.properties = description;  
            });
            });
        self.port.emit('getDimension'); 
            self.port.on('dimension', function(response) {
                var dimensions = eval('('+ response + ')');
                for(var cont = 0, l = dimensions.length; cont < l; ++cont) {
                    table.append("<tr id=dimension"+cont+"><td>"+dimensions[cont]+"</td></tr>");    

                    items.forEach( function(item) {
                        var prop = [];
                        prop = item.properties;
                        var lun = prop.length;
                        for( var p =0;p < lun;) {
                            if(item.properties[p].dimension == dimensions[cont]) {                              table.find('#dimension'+cont).append("<td>"+item.properties[p].value+"</td>");
                            }
                            else {
                                table.find('#dimension'+cont).append("<td> --- </td>");
                            }
                            ++p;                        }

                    });

                };
        });

            container.append(table);

        });

self.on（'message'，function（）{
var container=$（“#container”）；
container.empty（）；
项目=[]；
self.port.emit（'getItem'）；
});
self.port.on（'items'，函数（响应）{
var-ok=0；
var项目=[]；
var table=$（'#tableContainer#table'）.clone（）；
var container=$（“#container”）；
表.追加（“”）；
var json=eval（“（“+response+”）”）；
for（var i=0，len=json.length；i

所有端口通信都是异步的——您不能依赖这些事件的顺序。另外，作为与您的问题无关的一般观察，但作为示例代码的一部分：不要使用

.innerHTML

（

$（
，
.html（）
，
.append（）
）使用未初始化、动态组合的HTML字符串。这本质上是一个潜在的安全漏洞，类似于SQL注入，仅适用于HTML。如果您希望稍后将加载项上载到addons.mozilla.org，该加载项可能会因这些不安全的使用而被拒绝。请改用能够正确转义您的内容的内容，例如
。append（$（“”，{id:someid}）.text（“sometext”）；
。谢谢。您对如何动态填充表有什么建议吗？如何解决异步通信的问题？