HTML DOM var 객체 완벽 가이드 – 생성 방법과 활용 예제

HTML DOM var 객체란?

HTML DOM의 Variable(변수) 객체는 HTML 문서 내의 <var> 요소를 나타냅니다. <var> 태그는 주로 수학 표현식이나 프로그래밍 코드에서 변수를 강조할 때 사용되며, 대부분의 브라우저에서는 기본적으로 기울임꼴(이탤릭체)로 표시됩니다.

JavaScript를 활용하면 이러한 <var> 요소를 동적으로 생성하고 웹 페이지에 추가할 수 있습니다.

var 객체 생성하기

<var> 객체는 document.createElement() 메서드를 통해 생성할 수 있습니다.

문법(Syntax)

document.createElement("VAR");

예제(Example)

다음 예제는 버튼을 클릭하면 var 객체를 생성하여 문서에 추가하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        background-color: #fff;
        color: #0197F6;
    }
    h1 {
        color: #23CE6B;
    }
    .btn {
        background-color: #fff;
        border: 2px solid #0197F6;
        height: 2rem;
        width: 40%;
        margin: 2rem auto;
        display: block;
        color: #0197F6;
        outline: none;
        cursor: pointer;
        border-radius: 20px;
    }
</style>
<body>
<h1>DOM var Object Demo</h1>
<button onclick="createHr()" class="btn">Create a var object</button>
<script>
    function createHr() {
        var varElement = document.createElement("VAR");
        varElement.innerHTML = 'This is a var element in HTML';
        document.body.appendChild(varElement);
    }
</script>
</body>
</html>

코드 설명

document.createElement("VAR"): 새로운 <var> 요소를 생성합니다.
innerHTML: 생성된 요소에 표시할 텍스트 내용을 지정합니다.
document.body.appendChild(): 생성된 var 요소를 문서의 body 끝에 추가합니다.

실행 결과(Output)

HTML DOM var 객체 완벽 가이드 – 생성 방법과 활용 예제

위 화면에서 "Create a var object"(var 객체 생성) 버튼을 클릭합니다.

HTML DOM var 객체 완벽 가이드 – 생성 방법과 활용 예제

버튼을 클릭하면 JavaScript 함수가 실행되어 새로운 <var> 요소가 동적으로 생성되고, "This is a var element in HTML"이라는 텍스트와 함께 페이지 하단에 표시되는 것을 확인할 수 있습니다.