ie8 appendchild不起作用

Question

我正在开发一个必须在IE8上运行的网站。

我需要创建一堆动态段落，因为我是在运行时从服务器提取数据的。

为此，我使用以下代码：

var tempAbstract = layerItems[iter].abstract; // string
var text1 = document.createElement('p');      // paragraph element 
text1.textContent = tempAbstract;             // assigning string to paragraph
$(text1).css({top:  iter*25 + 30,  left: 200, position:'absolute'});  // positioning
$(text1).css('color', 'black');                                // make text color black
document.getElementById("listLayersWrapper").appendChild(text1);  // appending to div

我的问题是文本无法呈现。

当我在添加元素之前和之后对div段落进行计数时，计数器会按照您期望的那样递增，但该文本不会呈现。 另外，当我调用position().left和position.top() ，元素也具有正确的坐标。

我不确定自己做错了什么，没有其他选择。

Answer 1

这个问题似乎不是与appendChild ，而是与textContent 。 根据MDN页面 ， textContent仅在IE9及更高版本中可用。 较旧版本的IE确实具有非标准的innerText属性 ，可用于实现同一目的。 这是实现此方法的方法。

例：

var tempAbstract = layerItems[iter].abstract;
var text1 = document.createElement('p');
if(text1.textContent !== undefined)
{
    text1.textContent = tempAbstract;
}else{
    text1.innerText = tempAbstract;
}
$(text1).css({top:  iter*25 + 30,  left: 200, position:'absolute'});
$(text1).css('color', 'black');
document.getElementById("listLayersWrapper").appendChild(text1);

另外，这可以在jQuery中实现。

例：

$('<p></p>')
    .text(layerItems[iter].abstract)
    .css({
        top: iter*25 + 30,
        left: 200,
        position:'absolute',
        color: 'black'
    })
    .appendTo("#listLayersWrapper");