HTML DOM HR 객체 완벽 정리 – 생성 방법과 예제

HTML DOM의 HR 객체는 HTML 문서 내 <hr> 요소를 나타냅니다. <hr> 태그는 문서에서 주제나 내용의 흐름이 바뀌는 지점을 시각적으로 구분하기 위해 가로 구분선을 삽입할 때 사용됩니다.

HR 객체 생성 방법

JavaScript에서는 document.createElement() 메서드를 사용하여 새로운 hr 객체를 동적으로 생성할 수 있습니다.

문법(Syntax)

document.createElement("HR");

이제 hr 객체를 실제로 활용하는 예제를 살펴보겠습니다.

예제(Example)

<!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;
    }
    hr {
        border-color: #db133a;
    }
</style>
<body>
<h1>DOM hr Object Demo</h1>
<button onclick="createHr()" class="btn">Create a hr object</button>
<script>
    function createHr() {
        var insElement = document.createElement("HR");
        document.body.appendChild(insElement);
    }
</script>
</body>
</html>

실행 결과(Output)

HTML DOM HR 객체 완벽 정리 – 생성 방법과 예제

위 코드를 실행한 후 "Create a hr object" 버튼을 클릭해 보세요. 클릭하는 즉시 createHr() 함수가 호출되어 새로운 hr 객체가 생성되고, appendChild() 메서드를 통해 문서의 body 끝에 추가됩니다.

그 결과 아래 이미지와 같이 빨간색(#db133a) 가로 구분선이 화면에 나타납니다.

HTML DOM HR 객체 완벽 정리 – 생성 방법과 예제

정리

이처럼 HTML DOM의 HR 객체를 활용하면 사용자의 동작(버튼 클릭 등)에 반응하여 페이지에 동적으로 구분선을 추가할 수 있습니다. 이는 DOM 조작의 기본 원리인 요소 생성 → 속성 설정 → 문서에 추가 과정을 보여주는 대표적인 예제입니다.