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