javascript - ie8 附加子不工作

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。根据the MDN page , textContent 仅在 IE9 及更高版本中可用。旧版本的 IE 确实有 non-standard innerText property你可以用它来实现同样的事情。以下是实现此功能的方法。

示例:

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