input 태그에 값 넣기, Object.value, innerText, innerHTML

Ajax 로 받아온 값을 innerHTML 을 이용해서 div 나 span 에 입력하는 것은 많이 해 보셨을텐데요..
물론, textarea 에도 이와 같은 방식이 잘 먹혀 들어갑니다.
그러면 Ajax 로 받아온 값을 input 에는 넣어 보셨나요..?

어디 한번, 테스트 해 봅시다. 코드는 아래와 같습니다.

<input id="idA" type="text">
<script>alert('자, value 로 값을 넣습니다. '); document.getElementById('idA').value = '1'</script>
<script>alert('자, innerText 로 값을 넣습니다. '); document.getElementById('idA').innerText = '2'</script>
<script>alert('자, innerHTML 로 값을 넣습니다. '); document.getElementById('idA').innerHTML = '3'</script>

자 .value 를 이용하여 값을 넣어 봅니다.


값이 '1' 들어가 있네요.. 그러면, .innerText 로 해 볼까요..


역시나, '2' 들어가 있네요.. 이제 마지막으로 .innerHTML 을 해 볼까요..



엇, 이게 뭡니까.. '알 수 없는 런타임 오류' 라고 나오네요..
div 나 span, textarea 에서는 볼 수 없던 오류가 나왔습니다.


따라서, text 타입의 input 에 값을 넣을때는 innerHTML 은 오류가 나니까 다른 키워드를 사용해 주세요.
그리고, input 에 값을 넣을 때는 Ajax 로 가져오는 값에 엉뚱한 공백이 들어가지 않도록 프로그램을 잘 코딩해 주어야 합니다.