2016-12-12 11 views
1

나는 자바 스크립트를 처음 사용합니다. 나는 기본적인 질문이있다. 누군가가 아래의 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); 

감사합니다.

+0

"document.body.appendChild (myTable);"을 수행해야합니다. id로 요소를 가져 오기 전에 html-element do 문서를 추가해야합니다. –

답변

0

지정된 값.

당신은 dynamiclly 테이블 요소를 생성하지만 당신은

그래서 당신이 그런 식으로 코드에이 APPEND 명령을 추가해야합니다 (이 DOM 요소에 테이블을 추가합니다) 페이지에 추가 didnt는 :

// 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

insertCelltable이 DOM에없는 경우 null을 반환합니다.

즉시 라인 1 일 이후에이 줄을 추가

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

를 작동하고 내 콘솔에서 "23.00"출력을 얻을 줄을 추가 한 후.

0

당신은 요소 후 당신은 자바 스크립트를 통해 테이블을 만드는

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

만들 추가해야합니다. 표 요소에 액세스하려고하면 DOM에 표시되지 않습니다. DOM에 표를 추가해야 작동 할 수 있습니다. 이 줄을 추가 할 수있는 var cell1Content

document.body.append (myTable); body

0

APPEND 테이블 작업

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

요소를 액세스하기 전에 바이올린
에서 getElementById() 메소드에 상기 실시하여 DOM에서 ID 속성 을 갖는 소자가 복귀 http://jsfiddle.net/tz5h8umk/2/

관련 문제