HTML DOM Span 객체 – 생성부터 접근까지 한 번에 정리

HTML DOM의 Span 객체는 HTML <span> 요소와 연결된 객체입니다. 자바스크립트를 활용하면 createElement() 메서드로 새로운 span 요소를 동적으로 생성할 수 있고, getElementById() 메서드로 문서에 이미 존재하는 span 요소에 접근할 수 있습니다.

Span 객체 생성 문법

새로운 span 객체를 생성하는 기본 문법은 다음과 같습니다.

var a = document.createElement("SPAN");

createElement() 메서드에 태그 이름을 인자로 전달하면 해당 요소의 DOM 객체가 반환됩니다. 단, 이 시점에는 요소가 화면에 나타나지 않으며, appendChild() 등으로 문서 트리에 추가해야 실제로 렌더링됩니다.

Span 객체 예제

버튼을 클릭하면 span 요소를 동적으로 생성하여 페이지에 추가하는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Span 객체 예제</h1>
<p>아래 버튼을 클릭하면 span 요소가 생성됩니다.</p>
<button onclick="createSpan()">CREATE</button>
<p>p 요소 안에 있는 텍스트입니다.</p>
<script>
    function createSpan() {
        var s = document.createElement("SPAN");
        var txt = document.createTextNode("span 요소 안에 들어갈 텍스트입니다.");
        s.appendChild(txt);
        document.body.appendChild(s);
    }
</script>
</body>
</html>

코드 설명

위 예제의 핵심 로직은 다음과 같이 동작합니다.

1. document.createElement("SPAN")으로 새로운 span 요소를 만듭니다.
2. createTextNode()로 span 안에 넣을 텍스트 노드를 생성합니다.
3. appendChild(txt)로 텍스트 노드를 span 요소의 자식으로 추가합니다.
4. document.body.appendChild(s)로 완성된 span 요소를 body 끝에 삽입해 화면에 표시합니다.

실행 결과

페이지를 처음 열면 다음과 같은 초기 화면이 나타납니다.

HTML DOM Span 객체 – 생성부터 접근까지 한 번에 정리

CREATE 버튼을 클릭하면 아래와 같이 span 요소가 동적으로 추가되어 텍스트가 화면에 표시됩니다.

HTML DOM Span 객체 – 생성부터 접근까지 한 번에 정리

정리

HTML DOM의 Span 객체를 활용하면 <span> 요소를 자바스크립트만으로 자유롭게 생성하고 조작할 수 있습니다. createElement()로 요소를 만들고 appendChild()로 문서에 추가하는 패턴은 div, p 등 다른 HTML 요소를 다룰 때도 동일하게 적용되므로, 동적 웹 페이지 구현의 기본기로 꼭 익혀두시기 바랍니다.