Я довольно новичок в Javascript. У меня просто основной вопрос. Может кто-нибудь сказать мне, почему выполнение кода javascript в ссылке JSFiddle ниже приводит к этой ошибке: «Не удается прочитать свойство« innerHTML »из null».

Ссылка на сайт: 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);

Спасибо.

1
Ali M 12 Дек 2016 в 10:21

5 ответов

Лучший ответ

Как упоминалось выше, метод getElementById () возвращает элемент с атрибутом ID из DOM с указанным значением.

Вы динамически создаете элемент таблицы, но не добавляете его на свою страницу (это добавит таблицу к элементам 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);
0
Oriel.F 12 Дек 2016 в 08:50

Вы создаете таблицу с помощью JavaScript. Когда вы пытаетесь получить доступ к элементу таблицы, он не будет присутствовать в DOM. Вам нужно добавить таблицу в DOM, тогда она будет работать. Добавить эту строку в состоянии var cell1Content

Document.body.append ( MyTable ) ;

0
Raj 12 Дек 2016 в 07:27

insertCell возвращает null, если родительский элемент table не существует в DOM.

Добавьте эту строку сразу после строки 1:

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

После добавления строки это работает, и я получаю вывод «23.00» в моей консоли.

0
Dai 12 Дек 2016 в 07:26

Добавить таблицу в body перед доступом к элементу

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

Рабочая скрипка
http://jsfiddle.net/tz5h8umk/2/

0
Rajesh Patel 12 Дек 2016 в 07:28

Вы должны добавить элемент после создания

var myTable = document.createElement("TABLE");
document.body.appendChild(myTable); 
0
selami 12 Дек 2016 в 07:26