HTML DOM Pre 객체 완벽 정리 – 생성 방법부터 실전 예제까지

HTML DOM의 Pre 객체는 HTML 문서 내의 <pre> 요소를 자바스크립트에서 표현하고 제어할 수 있도록 해주는 객체입니다. <pre> 태그는 'preformatted(미리 서식이 지정된)'의 약자로, 코드 블록처럼 공백과 줄바꿈을 그대로 유지해야 하는 텍스트를 화면에 표시할 때 사용됩니다.

Pre 객체 생성하기

기본 문법

자바스크립트에서 Pre 객체를 새로 만들려면 createElement() 메서드를 사용합니다. 기본 문법은 다음과 같습니다.

document.createElement("PRE");

이 코드는 새로운 <pre> 요소 노드를 반환하며, 이후 원하는 내용을 넣고 문서에 추가하면 됩니다.

실전 예제

버튼을 클릭하면 <pre> 요소가 동적으로 생성되어 페이지에 추가되는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#fff;
        color:#0197F6;
    }
    h1{
        color:#23CE6B;
    }
    .drop-down{
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:8px;
    }
    .btn{
        background-color:#fff;
        border:1.5px dashed #0197F6;
        height:2rem;
        border-radius:2px;
        width:60%;
        margin:2rem auto;
        display:block;
        color:#0197F6;
        outline:none;
        cursor:pointer;
    }
    pre{
        font-size:1.2rem;
        color:#db133a;
    }
</style>
</head>
<body>
<h1>DOM pre Object Demo</h1>
<button onclick="createPre()" class="btn">Create a pre object</button>
<script>
    function createPre() {
        var preElement = document.createElement("PRE");
        preElement.innerHTML="Hi! I'm a pre HTML element";
        document.body.appendChild(preElement);
    }
</script>
</body>
</html>

코드 설명

위 예제의 핵심 로직은 createPre() 함수 안에 있습니다.

1단계: document.createElement("PRE")로 새로운 <pre> 요소를 생성합니다.
2단계: innerHTML 속성을 사용해 요소 안에 표시할 텍스트를 지정합니다.
3단계: appendChild() 메서드로 해당 요소를 <body> 끝에 추가합니다.

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

HTML DOM Pre 객체 완벽 정리 – 생성 방법부터 실전 예제까지

여기서 “Create a pre object” 버튼을 클릭하면, 아래와 같이 새로운 <pre> 요소가 동적으로 생성되어 화면에 표시됩니다.

HTML DOM Pre 객체 완벽 정리 – 생성 방법부터 실전 예제까지

정리

HTML DOM Pre 객체를 활용하면 <pre> 요소를 정적인 마크업이 아니라 자바스크립트로 동적으로 만들어 삽입할 수 있습니다. 코드 에디터, 콘솔 출력 영역, 서식이 중요한 데이터 표시 등 공백과 줄바꿈이 유지되어야 하는 UI를 구현할 때 특히 유용합니다.