#7-2 / HTML 오브젝트에 데이터 출력

CLASS/HTLML,CSS,JS

#7-2 / HTML 오브젝트에 데이터 출력

hingu 2024. 4. 26. 14:04

⚡ HTML 오브젝트에 데이터 출력

<script>
    //버튼 클릭시 이벤트 발생 : 이벤트 핸들링 함수
    function nb(){
        var nbBox = document.getElementById("box");
        var n = "135678";
        nbBox.innerText = n; //해당 오브젝트에 문자 출력
    }
    
    //리스트 출력 버튼 이벤트 함수
    function dataLoad(){
        var list = document.getElementById("list");

        var f;
        var txt=""; //HTML 태그 및 데이터 누적 받을 변수
        for(f=1; f<=10; f++){
            txt += "<li>리스트"+ f +"</li>" //누적받음
        }
        list.innerHTML = txt; //누적된 데이터 리스트에 출력
    }
</script>

<body>
    <!--------인증번호 출력----------->
    <div class="box" id="box"></div> 
    <input type="button" value="인증번호" onclick="nb()">
    
    <!--------리스트 출력----------->
    <ul id="list"></ul>
    <input type="button" value="리스트 출력" onclick="dataLoad()">
</body>