"Uncaught TypeError : null의 appendChild '메서드를 호출 할 수 없음"

Question

HTML 텍스트 영역에서 텍스트를 가져 오려고 시도하고'제출 '버튼을 누르면 create() 메서드를 호출하려고합니다. 메소드는 텍스트 영역의 메시지를 사용하여 클래스와 함께 자체 p 태그에 게시하고 자체 p 태그에 날짜 스탬프를 게시하고 자체 클래스를 게시합니다.

이들은 모두 div 'comments'에 있습니다. 내가 (크롬 개발자 도구를 사용하여) 점점 오전 오류는

Uncaught TypeError: Cannot call method 'appendChild' of null.

이이 목표입니다 "cmt.appendChild (divTag);". 나는 Javascript에 매우 익숙하며, 이것은 나의 기술을 향상시키는 연습 일뿐입니다. 모든 도움은 대단히 감사합니다!

var cmt = document.getElementById('comments'); 

function create() { 

    var username = 'User', 
     message = document.getElementById("textBox").value, 
     divTag = document.createElement('div'), 
     p1 = document.createElement('p'), 
     p2 = document.createElement('p'); 

    divTag.className = 'comment'; 

    p1.className = 'date'; 
    p1.innerHTML = new Date(); 
    divTag.appendChild(p1); 

    p2.className = 'message'; 
    p2.innerHTML = username + ': ' +message; 
    divTag.appendChild(p2); 

    cmt.appendChild(divTag); 
} 

Answer 1

오류는 페이지에 ID "comments"가있는 요소가 없다는 것을 의미합니다. document.getElementById은 이러한 ID를 가진 요소가 발견되지 않으면 null을 반환하므로 cmd.appendChild(divTag)은 null.appendChild(divTag)으로 실행됩니다.

요소가 확실하다면 브라우저에 의해 요소가 생성되기 전에 변수 을 할당하는 JavaScript를 실행할 수 있습니다. 이를 방지하기 위해 표준 연습은 외부 JavaScript가 포함 된 <script> 태그 을 </body> 태그 닫기 직전에 배치하는 것입니다.

어떤 이유로 스크립트 태그를 이동할 수없는 경우 $(document).ready() (jQuery) or equivalent과 함께 변수를 할당하는 코드를 실행 해보십시오.

Answer 2

필수 요소가 존재하면 코드가 작동합니다. this Fiddle에서 볼 수 있듯이 HTML과 유사한 경우

작품 :

<div id="comments"> 
    <input id="textBox" type="textBox" value="Hello" /> 
</div> 

내 생각 엔 당신이 존재하지 않는 예상대로 식별자 중 하나가 맞춤법이 틀린 또는 요소가 될 수 있다는 것입니다.

그러나 외부 파일에서 스크립트를 실행하는 경우 문서가 완전히로드되기 전에 실행하려고 할 수 있으므로 스크립트는 이 아닌 DOM을 사용할 수있는 요소를 참조합니다.

jQuery에서 $(document).ready(function(){// your code here..})을 감쌀 것입니다.
이 게시물에서 JavaScript로 수행하는 방법에 대한 세부 정보는 Documen Ready equivalent without jQuery입니다.