자바스크립트 호출순서?(제이쿼리)

        var count = 0;  //전역변수 선언과 동시에 초기화
        var $container = $("#container");   //전역변수 선언과 동시에 초기화

        $(document).ready(function(){
            
            //append()문자열을 붙여서 출력하는 함수(메서드)
            $container.append("<p>" + count + "안녕하세요.반갑습니다.");
            count++;
            //버튼이 클릭이 되면 익명함수를 실행하여 지속적으로 글자를 
            //붙여서 출력하게 된다.
            $("#btnPrint").click(function(){
                $container.append("<p>" + count + "안녕하세요.반갑습니다.");
                count++;
            });

 

document.ready 이전에 전역변수 선언과 함께 요소를 가져와 초기화하였더니 동작을 안하였다.

 

why? 호출순서로 인해서??

-document.ready가 호출?되기전 container라는 dom?을 찾으려는 것이다.

 즉, 아직 브라우저에 dom이 아직 오기전에 container를 호출하니 작동을 안하는 것

 

        var count = 0;  //전역변수 선언과 동시에 초기화
        var $container = null;   //전역변수 선언과 동시에 초기화

        $(document).ready(function(){
            var $container = $("#container"); 
            //append()문자열을 붙여서 출력하는 함수(메서드)
            $container.append("<p>" + count + "안녕하세요.반갑습니다.");
            count++;
            //버튼이 클릭이 되면 익명함수를 실행하여 지속적으로 글자를 
            //붙여서 출력하게 된다.
            $("#btnPrint").click(function(){
                $container.append("<p>" + count + "안녕하세요.반갑습니다.");
                count++;
            });
        });

 

-dom이 다 호출된후 container를 불러주면 정상 작동된다