在Javascript中访问对象的内容

Question

我对Javascript很陌生。我只是有一个基本问题。有人可以告诉我为什么在下面的JSFiddle链接中执行javascript代码会导致此错误：＆＃34;无法阅读属性＆inner;内部HTML＆＃39; of null＆＃34;。

链接： 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

如果DOM中不存在父insertCell，则

null会返回table。

在第1行后立即添加此行：

var myTable = document.createElement("TABLE");
document.body.appendChild( myTable ); // <-- this line
var row1 = myTable.insertRow(-1);

添加线后，它可以在我的控制台中输出“23.00”。

Answer 2

您必须在创建

后附加元素

var myTable = document.createElement("TABLE");
document.body.appendChild(myTable); 

Answer 3

您正在通过javascript创建表格。当您尝试访问表元素时，它将不会出现在DOM中。您需要将表添加到DOM然后才能工作。添加此行能够使用var cell1Content

document.body.append（myTable的）;

Answer 4

在访问元素

之前，

在body中附加表格

var myTable = document.createElement("TABLE");
document.body.appendChild(myTable); 

工作小提琴 http://jsfiddle.net/tz5h8umk/2/

Answer 5

如上所述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);