Javascript 代码在 IE8/7 中不起作用

Question

此代码适用于 chrome/ff/ie9，但不适用于 ie8/7。

http://jsfiddle.net/vDZJM/6/

这是 JS:

function doDistricts(theData){
    var district="";
    var district="";
    $(theData).find("district").each(function(){

        var theDistrict = $(this);
        var districtName = theDistrict.text();
        var level = theDistrict.attr("level");
        var attr = theDistrict.attr('deleted');
        if(typeof attr !== 'undefined' && attr !== false){
            district=district+'\t\t\t<div class="district deleted">\n';
            district=district+'\t\t\t\t<header class="clearfix doNode" data-role-id="'+districtName+'" data-role-nodeLevel="'+level+'" data-role-nodeValue="'+districtName+'">\n';
            district=district+'\t\t\t\t\t<span class="arrow"></span>\n';
            district=district+'\t\t\t\t\t<img src="/img/address_list/map.png" alt="'+districtName+'" class="icon" />\n';
            district=district+'\t\t\t\t\t<span class="text">'+districtName+'</span>\n';
            district=district+'\t\t\t\t\t<a class="add" href="#">Add</a>\n';
            district=district+'\t\t\t\t</header>\n';
            district=district+'\t\t\t\t<div class="children"></div>\n';
            district=district+'\t\t\t</div>\n';
        }else{
            district=district+'\t\t\t<div class="district">\n';
            district=district+'\t\t\t\t<header class="clearfix doNode" data-role-nodeLevel="'+level+'" data-role-id="'+districtName+'" data-role-nodeValue="'+districtName+'">\n';
            district=district+'\t\t\t\t\t<span class="arrow"></span>\n';
            district=district+'\t\t\t\t\t<img src="/img/address_list/map.png" alt="'+districtName+'" class="icon" />\n';
            district=district+'\t\t\t\t\t<span class="text">'+districtName+'</span>\n';
            district=district+'\t\t\t\t\t<a class="remove" href="#">Remove</a>\n';
            district=district+'\t\t\t\t</header>\n';
            district=district+'\t\t\t\t<div class="children"></div>\n';
            district=district+'\t\t\t</div>\n';
        }

    });
    return district;
}

$('div.1').html(doDistricts($(theData)));

在代码较多等的工作环境中，生成内容但<header>标签过早关闭，这意味着所有代码都应该在 <header> 内标签(<span class="arrow">等)实际上位于它之外。为什么会这样？

Answer 1

如果您的文档是 html5，则在向 DOM 添加元素时需要使用innershiv

http://jdbartlett.com/innershiv/