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有关。根据{{​​3}}，textContent仅适用于IE9及更高版本。较旧版本的IE确实有the MDN page可以用来实现同样的目的。以下是如何实现这一点。

示例：

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