document.write 없이 HTML 페이지에 JavaScript 변수를 표시하는 방법

HTML 페이지에서 document.write()를 사용하지 않고 JavaScript 변수의 값을 화면에 표시하려면 Element.innerHTML 속성을 활용하면 됩니다. innerHTML은 특정 HTML 요소의 내부 콘텐츠를 읽거나 변경할 수 있게 해주는 속성으로, 사용자 입력값이나 계산 결과 같은 변수 값을 실시간으로 웹 페이지에 반영할 때 매우 유용합니다.

innerHTML을 사용한 변수 표시 예제

아래 코드는 입력 필드에 이름을 입력하면 그 값이 즉시 다른 요소에 표시되도록 구현한 예제입니다.

var $myName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');

$myName.addEventListener('input', function(event){
    $jsValue.innerHTML = $myName.value;
}, false);

코드 동작 원리

• 요소 선택: document.querySelector()를 사용해 .name 클래스(입력 필드)와 .jsValue 클래스(결과를 표시할 요소)를 각각 가져옵니다.
• 이벤트 리스너 등록: 입력 필드에 input 이벤트 리스너를 연결하여, 사용자가 타이핑할 때마다 함수가 실행됩니다.
• 값 표시: $jsValue.innerHTML = $myName.value; 구문을 통해 입력 필드의 현재 값을 화면 요소에 그대로 출력합니다.

참고: textContent 사용하기

단순히 텍스트만 표시할 경우에는 textContent를 사용하는 것이 더 안전합니다. innerHTML은 HTML 태그를 해석하기 때문에 악성 스크립트가 삽입될 위험(XSS)이 있지만, textContent는 문자열을 그대로 출력하므로 보안상 더 권장됩니다.

$jsValue.textContent = $myName.value;

이처럼 innerHTML 또는 textContent를 활용하면 document.write 없이도 안전하고 유연하게 JavaScript 변수를 HTML 페이지에 표시할 수 있습니다.