화면구현/HTML

innerHTML

psys 2020. 6. 18. 12:37
728x90

script의 위치

body태그 위가 권장되는 위치

 

>> 아이디 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML!</title>
</head>
<body>
    <div id="id_na">
        <div>박</div>
        <div>성</div>
        <div>연</div>
    </div>
    <script>
        //권장 스크립트 태그위치
        var v_div1 = document.getElementById("id_na");
        console.log(v_div1);
    </script>
</body>
</html>

 

>> 태그 사이의 값을 가리킴

    <script>
        var v_div1 = document.getElementById("id_na");
        console.log(v_div1.innerHTML);
    </script>

>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML!</title>
</head>
<body>
    <div id="id_na">
        <div>박</div>
        <div id="id_child2">성</div>
        <div>연</div>
    </div>
    <script>
        var v_div1 = document.getElementById("id_na");
        var v_div2 = document.getElementById("id_child2");
        console.log(v_div2.innerHTML);
    </script>
</body>
</html>

 

>> 성 값 대체

    <script>
        //권장 스크립트 태그위치
        var v_div1 = document.getElementById("id_na");
        var v_div2 = document.getElementById("id_child2");
        console.log(v_div2.innerHTML);
        v_div2.innerHTML="무엇?";
    </script>

 

>> 태그 사용 가능

    <script>
        //권장 스크립트 태그위치
        var v_div1 = document.getElementById("id_na");
        var v_div2 = document.getElementById("id_child2");
        console.log(v_div2.innerHTML);
        v_div2.innerHTML="<h1>무엇?</ht>";
    </script>

>> 전부를 덮어 씌우기

    <script>
        //권장 스크립트 태그위치
        var v_div1 = document.getElementById("id_na");
        var v_div2 = document.getElementById("id_child2");
        console.log(v_div2.innerHTML);
        v_div2.innerHTML="<h1>무엇?</ht>";
        v_div1.innerHTML="<h1>난 뭐야?</ht>";
    </script>

>> 이미지도 사용 가능

    <script>
        //권장 스크립트 태그위치
        var v_div1 = document.getElementById("id_na");
        var v_div2 = document.getElementById("id_child2");
        console.log(v_div2.innerHTML);
        v_div2.innerHTML="<h1>무엇?</ht>";
        v_div1.innerHTML='<img src="./images/a.jpg"></ht>';
    </script>

 

ex> 구구단

    <div id="id_disp"></div>
    <script>
        var v_disp = document.getElementById("id_disp");
        var v_dan = 7;
        var v_str = "";
        for(var i = 1;i<=9;i++){
            v_str = v_str+v_dan+"X" +i+" = "+i*v_dan+"<br>";
        }
        v_disp.innerHTML=v_str;
    </script>

 

prompt

사용자 입력창

기본 값은 문자열!!

*이니 숫자로 자동 출력이 됨(+이면 더하기 안됨)

<body>
    <div id="id_disp"></div>
    <script>
        var v_disp = document.getElementById("id_disp");
        var v_dan = prompt("단을 입력하시오.");
        var v_str = "";
        for(var i = 1;i<=9;i++){
            v_str = v_str+v_dan+"X" +i+" = "+i*v_dan+"<br>";
        }
        v_disp.innerHTML=v_str;
    </script>
</body>

더보기

초기값

        var v_dan = prompt("단을 입력하시오.","5");

 

취소버튼 클릭시 null값 출력

>> null은 false

<body>
    <div id="id_disp"></div>
    <script>
        var v_disp = document.getElementById("id_disp");
        var v_dan = prompt("단을 입력하시오.","5");
        if(!v_dan){ v_dan = 2}
        var v_str = "";
        for(var i = 1;i<=9;i++){
            v_str = v_str+v_dan+"X" +i+" = "+i*v_dan+"<br>";
        }
        v_disp.innerHTML=v_str;
    </script>
</body>

취소 눌렀을 때 2단이 출력

 

ex> 테이블 형태로 구구단 출력

더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table id="id_disp" border="2">
    </table>
    <script>
        var v_disp = document.getElementById("id_disp");
        var v_dan = prompt("단을 입력하시오.", "5");
        if (!v_dan) { v_dan = 2 }
        var v_str = "<table border=2>";
        for (var i = 1; i <= 9; i++) {
            v_str += "<tr><td>"+v_dan+" X " +i+" = "+(i*v_dan)+"</td></tr>";
        }
        v_disp.innerHTML=v_str;
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table id="id_disp" border="2">
    </table>
    <script>
        var v_disp = document.getElementById("id_disp");
        var v_dan = prompt("단을 입력하시오.", "5");
        if (!v_dan) { v_dan = 2 }
        var v_str = "<table border=2>";
        for (var i = 1; i <= 9; i++) {
            v_str += "<tr><td>"+v_dan+"</td>"+"<td>"+" X "+"</td>" 
                +"<td>"+i+"</td>"+"<td>"+" = "+"</td>"+"<td>"+(i*v_dan)+"</td></tr>";
        }
        v_disp.innerHTML=v_str;
    </script>
</body>
</html>

 

'화면구현 > HTML' 카테고리의 다른 글

HTML 버튼과 텍스트와 복사와참조  (0) 2020.06.19
HTML 함수  (0) 2020.06.19
복사(copy)와 참조(reference)의 이해  (0) 2020.06.18
HTML 배열과 JSON  (0) 2020.06.18
JSON(JavaScript Object Notation)  (0) 2020.06.18