首页 > 通过js动态增加html节点

通过js动态增加html节点

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);


----------


<div id="province"></div>




<div id="city"></div>



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


是用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('div'); 
        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的内容。

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

【热门文章】
【热门文章】