자바 스크립트 - innerHTML을 통해 값을 업데이트하는 동안 발생하는 문제

자바 스크립트 코드를 확인하려고했지만 정확한 이유를 이해할 수없는 것을 발견했습니다. 내 HTML 파일에서 id라는 ID를 가진 div는 아무 값도 가지고 있지 않은 test라고 불린다. 이제 innerHTML을 통해이 div 안에있는 텍스트/문장을 업데이트하고 싶습니다. 테스트 용도로 사용하기 때문에 함수/이벤트를 사용하지 않습니다. 그냥 값을 업데이트하려면 추가하십시오. 내가 페이지를로드 할 때 자바 스크립트 - innerHTML을 통해 값을 업데이트하는 동안 발생하는 문제

<body> 
<script type="text/javascript"> 
    var test_content = "This is new text in my test div"; 
    document.getElementById("test").innerHTML = test_content; 
</script> 
<div id="test"></div> 
</body>

지금, 그것은 시험 DIV 내부 빈 아무것도 보여 없지만 아래에서와 같이 DIV 아래의 자바 스크립트 코드를 삽입하는 경우, 다음은 변수의 값을 보이고있다. (참고 : 어떤 기능이나 이벤트도 사용하지 않고 페이지로드를 업데이트하고 싶습니다.)

<body>  
<div id="test"></div> 
<script type="text/javascript"> 
    var test_content = "This is new text in my test div"; 
    document.getElementById("test").innerHTML = test_content; 
</script> 
</body>

아무 이유없이이 이유를 설명 할 수 있습니까? 미리 감사드립니다.

감사합니다.
로빈

출처

2014-07-16 Robindra Singha

. 그렇기 때문에 script 태그를 페이지 하단에 넣거나 window.onload 이벤트 리스너와 함께 포장하는 것이 좋습니다.

$(function() { 
    var test_content = "This is new text in my test div"; 
    document.getElementById("test").innerHTML = test_content; 
});

을 그리고 당신은 자바 스크립트 코딩에서 초보자 것으로 보인다 이후, 나는 this one와 같은, 당신은 MDN에 대한 몇 가지 기사를 읽는 것이 좋습니다

<body>  
<script type="text/javascript"> 
    window.onload = function() { 
     var test_content = "This is new text in my test div"; 
     document.getElementById("test").innerHTML = test_content; 
    } 
</script> 
<div id="test"></div> 
</body>

당신이 jQuery를 사용하는 경우, 당신은이 작업을 수행 할 수 있습니다 this one.

출처

2014-07-16 13:50:22

꽤 표준적인 문제. 어떤 종류의 'onload'가 필요합니다! 첫 번째는 div#test이 생성 전에 을 실행, 그래서 현재 존재하지 않기 때문이다

<body> <div id="test"></div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { var test_content = "This is new text in my test div"; document.getElementById("test").innerHTML = test_content; }); </script> </body>

출처

2014-07-16 13:50:06 Katana314

그는 이유를 물었습니다. 이것은 정확한 해결책이지만 실제로 대답하지는 않습니다. –

자바 스크립트는 실행시 즉시 호출되며 호출 될 때 실행됩니다. 첫 번째 예에서 파서는 스크립트 태그를 읽고 실행 한 다음 나머지 페이지 (위에서 아래로)를로드합니다. div가 laode되고 생성되기 전에 스크립트가 실행되기 때문에 div는 비어있게됩니다. 그것이 onload 이벤트가 도입 된 이유입니다. http://www.w3schools.com/jsref/event_onload.asp

출처

2014-07-16 13:51:05 Liquinaut

첫 번째 인스턴스에서 이것이 발생하지 않는 이유는 DOM 요소 'test'가 아직 작성되지 않았기 때문입니다.

div 뒤에 스크립트를 배치하면 요소가 이미 만들어져 스크립트가 실행될 수 있습니다.

body 태그에서 전달 된로드 이벤트를 수신하여 DOM 준비가 완료되면 코드를 실행해야합니다. {...}

출처

2014-07-16 13:55:03 James

중 하나 JQuery와 당신의 한 예를 들자면)

하여 body.onload = 기능 (이 아주 간단 <body onload='myFunction'> 또는 자바 스크립트의 온로드 핸들러와 같은 인라인 (in-line) 수신기를 사용하여 수행 할 수 있습니다 $(document).ready()을 작성해야하거나 마지막 html 코드에 jquery 코드를 작성해야합니다. 둘 다 동일한 의미를 갖습니다. 즉, 모든 HTML이로드 된 후 일부 기능을 수행 할 때입니다. 이 경우에는 모든 문서 내용이로드 된 후 일부 기능을 수행하십시오.이가지 경우를 취할 :

사례 # 1 :

을 우리가 어떤 이벤트 핸들러없이 첫 번째 경우와 HTML 위에 기록 된 자바 스크립트 코드가이 경우, HTML 엔진에서 HTML 코드를 읽기 시작합니다 위에서 아래로 그리고 순간에 그것은 script 태그에 충돌합니다 그것은 자바 스크립트 엔진을 호출합니다. 그래서이 자바 스크립트 코드에 따라 먼저 실행됩니다.

이 라인을 작성하는 경우 document.getElementById("test").innerHTML = test_content; 같이

var x = document.getElementById("test"); 
x.innerHTML = test_content;

는 x의 가치, 즉 null을 반환 콘솔 null .because의 사업부가 아직로드되지, DIV의 그러므로 값하지 않습니다 변화 될 것이다

사례 # 2 :

script 태그는 마지막에 배치됩니다. 그래서 지금, 모든 html은 html 엔진에 의해로드됩니다. 따라서 x의 값은 <div id="test"></div>이 될 것이고, 이제는 모든 자바 스크립트 코드가 오류없이 실행될 것입니다.

내가 JQuery와 $(document).ready()에 대해 앞서 언급 한 바와 같이이 ... 잘은 JQuery와 방법입니다하지만이 같은 자바 스크립트로 작성 될 수있다 : 모든 이벤트가 발생하는

<script type="text/javascrip"> 
var start_script = function(){ 
// function to be performend 
} 
</script> 
    <body onload="start_script();"> 
    ...... 
</body>

때문에 때 모든 HTML 로드되고 컴파일됩니다.

출처

2014-07-16 13:55:38 anni

자바 스크립트 - innerHTML을 통해 값을 업데이트하는 동안 발생하는 문제

답변

관련 문제