javascript - 在 Javascript 中访问对象的内容

Question

我对 JavaScript 还很陌生。我只有一个基本问题。有人可以告诉我为什么在下面的 JSFiddle 链接中执行 javascript 代码会导致此错误:“无法读取 null 的属性‘innerHTML’”。

链接: http://jsfiddle.net/ali89ma/tz5h8umk

var myTable = document.createElement("TABLE");
var row1 = myTable.insertRow(-1);
var cell1 = row1.insertCell(-1);
cell1.innerHTML = "23.00";
cell1.id = "1000price";
var cell1Content = document.getElementById("1000price").innerHTML;
console.log(cell1Content);

但是如果我在下面写下这一行，它就可以正常工作。

var cell1Content = cell1.innerHTML;
console.log(cell1Content);

谢谢。

Answer 1

如上所述，getElementById() 方法从 DOM 中返回具有指定值的 ID 属性的元素。

您动态创建了一个表格元素，但没有将其附加到页面(这会将表格添加到 DOM 元素)

因此您需要将此追加顺序添加到您的代码中，如下所示:

// create a table element dynamiccly but it still not in the DOM elements
    var myTable = document.createElement("TABLE");
    var row1 = myTable.insertRow(-1);
    var cell1 = row1.insertCell(-1);
    cell1.innerHTML = "23.00";
    cell1.id = "1000price";
//the next line will add your table to the DOM
    document.body.appendChild( myTable );
//now you can use the getElementById method to get elements from the DOM
    var cell1Content = document.getElementById("1000price").innerHTML;
    console.log(cell1Content);