javascript - 通过js动态增加html节点

Question

var cityHtml = "";
var cityNum = 0;
for (var index in departmentList) {
    var depart = departmentList[index];
    var html = "<td>

<p>" + depart.departmentName + "</p>

</td>";

    if (depart.updepartment == -1) {
        var tr = document.createElement("tr");
        tr.innerHTML = html;
        $("#province").append(tr);
    }
    //省级的编号是1
    else if (depart.updepartment == 1) {
        cityHtml += html;
        cityNum++;
                //每四个一行     
                if (cityNum % 4 == 0) {
            var cityTr = document.createElement("tr");
            cityTr.innerHtml = cityHtml;
            $("#city").append(cityTr);

            cityHtml = "";
        }
    }

}
var cityTr = document.createElement("tr");
cityTr.innerHtml = cityHtml;
$("#city").append(cityTr);


----------


<p id="province"></p>




<p id="city"></p>

上面是我的代码，但是得到的结果确实province的p能显示值，而city的p显示的是空的，请问是为什么呢？

Answer 1

是用IE10以下吗？ 在chrome内核的看有没有问题
IE9以下的的innerHTML 是只读
以前做动态生成表格兼容的时候就遇到过了，只能替换节点，在网上找了下修改了下有下面的代码，你看下参考

html里面这样画表格

     <table id="spvisWindow" class=" spvisTable" border="1" cellspacing="0" cellpadding="0" align="center">
        <tbody id="tabbody" >
        </tbody>
      </table>

JS代码这样写
下面是增加内容的函数：

function addReSpTab(tabContent)
{
    var tabDom = document.getElementById("spvisWindow");
    var tabbody = document.getElementById("tabbody");
        if(tabbody.innerHTML!=null)
        var tempbody =tabbody.innerHTML; 

        //IE不支持Tab的innerHTML，所以要区分对待    
        var isIE=!!window.ActiveXObject; 
        if(isIE)
        {
            addTableInnerHTML(tabDom, tabContent+tempbody);
        }else
        {
            tabbody.innerHTML = tabContent + tabbody.innerHTML; 
        }

};

下面是IE使用的函数

    //IE使用，增加一栏数据，替换渲染DOM
function addTableInnerHTML(table, html) { 

        var temp = table.ownerDocument.createElement('p'); 
        temp.innerHTML = '<table><tbody id="tabbody">' + html + '</tbody></table>'; 
        if(table.tBodies.length == 0)
            { 
                var tbody=document.createElement("tbody"); 
                table.appendChild(tbody); 
            } 
        table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]);


} 

其中function addReSpTab(tabContent)的参数tabContent就是一串字符串

<tr >....</tr>

    其实这段代码核心就是增加<tbody></tbody>再替换tbody的内容。

Answer 2

不好意思，小问题innerHtml应该写成innerHTML