[JS] 03. innerHTML / innerText / value

지난 게시글에서는 데이터를 입력받는 방법들을 확인했었는데 그 중에서 사용됐던 기능 중 하나인

innerHTML을 먼저 알아보고, innerText, value에 대해서 공부해보려 한다.

 

1) 요소.innerHTML | innerText

무엇보다 먼저 innerHTML과 innerText의 차이를 간단하게 알아보자면

innerHTML

입력한 내용에 HTML 태그가 있으면 HTML 태그로 인식해서 화면에 HTML로 출력해줌

innerText

입력한 내용에 HTML 태그가 있어도 텍스트 그대로 출력함

 

사실 이 차이만 알고 있으면 언제 어떤 기능을 사용하는 데 어려움이 없을 것 같다.

 

innerHTML에 간단한 예시 코드를 살펴보면

<button onclick="test1();">클릭할때마다 1씩늘어남</button>
<div id="area1"></div>

<script>
    var divEl = document.getElementById('area1');
    var count = 0;

    function test1() {
        divEl.innerHTML += count + '<br>';

        count = count + 1;
    }
</script>

위 코드에서 innerHTML에 '<br>' 코드를 문자열로 사용한 것을 확인할 수 있다.

innerHTML은 HTML 코드를 사용하면 인식해서 반영해주기 때문에 

다음과 같은 결과를 확인할 수 있다.

 

 위의 코드에서 HTML을 Text로 변경해보자

 

<button onclick="test2();">클릭할때마다 1씩늘어남</button>
    <div id="area2"></div>

    <script>
        var divEl = document.getElementById('area2');
        var count = 0;

        function test2() {
            divEl.innerText += count + '<br>';

            count = count + 1;
        }
    </script>

이렇게 변경이 되면 <br> 태그도 줄바꿈이 아닌 텍스트로 그대로 출력되는 것을 확인할 수 있다. 

 

2) 요소.value

value는 각자 태그에 값을 가져오는 역할을 한다.

첫번째는 alert로 입력한 값을 가져오는 코드와

f12를 눌러서 console 창에 뜨는 값들을 확인하는 코드를 작성해보자

 

 2-1) alert로 입력한 값 가져오기

<input type="text" id="textTest"/> <button onclick="textBtn();">input확인</button>

<script>
    function textBtn() {
        var textValue = document.getElementById('textTest').value;

        alert('입력한 값은 ' + textValue);
    }
</script>

 

단순하게 코드를 작성해봤는데 값을 입력해보고 input확인 버튼을 눌러보자

확인 버튼을 누르면 alert창에 input 박스 안에 적은 값이 출력되는 것을 확인할 수 있다.

 

2-2) 콘솔창에 선택한 값 가져오기

<input type="radio" name="radioTest" value="1">1
<input type="radio" name="radioTest" value="2">2
<input type="radio" name="radioTest" value="3">3
<button onclick="radioBtn();">radio 확인</button>

<script>
	function radioBtn() {
            var radioValue = document.getElementsByName('radioTest');

            for(var i = 0; i < radioValue.length; i++){
                if(radioValue[i].checked){
                    console.log('선택한 값은 ' + radioValue[i].value);
                }
            }
        }
</script>

다음과 같은 코드를 작성하고 F12를 눌러 콘솔창을 확인하며 각 radio버튼을 누르면서 확인해보자

 

1 2 3

확인 하면 콘솔창에 누른 value값이 넘어가는 것을 확인할 수 있다.