JS [Value 속성]

value와 innerText 를 다뤄보자 각 속성의 차이와 언제 사용하는지 알아보자

1. value

 

• 어디에 사용?: 주로 input,textarea,select 와 같은 폼 요소에 사용됩니다.
• 역할: 사용자가 입력한 값 또는 프로그램matically 설정한 값을 다룹니다.

input 값을 변경하려면 value 사용해야함 값 자체는 value 속성에 저장되기 때문이다.

<input type="text" id="myInput" value="기본 값">
<script>
    // input의 값 변경
    const inputElement = document.getElementById('myInput');
    inputElement.value = "새로운 값";
</script>

 

2. innerText

• 어디에 사용?: 주로 div,span,p 와 같은 일반 HTML 요소에 사용됩니다.
• 역할: 해당 태그 내의 텍스트 내용을 다룹니다. 이 속성은 태그 안에 있는 순수 텍스트를 변경하거나 가져올 때 사용됩니다.

<div id="myDiv">기본 텍스트</div>
<script>
    // div의 텍스트 변경
    const divElement = document.getElementById('myDiv');
    divElement.innerText = "새로운 텍스트";
</script>

 

input,textarea 같은 태그는 value 를 사용하고

div나 span 의 텍스를 수정하고 싶은 경우는 innerText 를 사용

 

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.