HTML DOM Strong 객체 – 텍스트 강조 요소를 동적으로 다루는 방법

HTML DOM의 Strong 객체는 HTML 요소와 연결된 객체입니다. 태그는 텍스트를 강하게 강조하며, 기본적으로 굵은 글씨(bold)로 표시됩니다. 자바스크립트에서는 createElement() 메서드를 사용해 새로운 strong 요소를 생성할 수 있고, getElementById() 메서드를 사용해 문서에 이미 존재하는 strong 요소에 접근할 수 있습니다.

문법(Syntax)

Strong 객체를 생성하는 기본 문법은 다음과 같습니다.

var s = document.createElement("STRONG");

위 코드는 새로운 요소를 메모리에 생성한 뒤 변수 s에 할당합니다. 이후 텍스트 노드를 추가하고 원하는 위치에 삽입하면 화면에 나타납니다.

예제(Example)

버튼을 클릭하면 요소가 동적으로 생성되어 페이지에 추가되는 예제입니다.

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

코드 설명

document.createElement("STRONG") : 새로운 요소를 생성합니다.
document.createTextNode() : strong 요소 내부에 들어갈 텍스트 노드를 만듭니다.
appendChild(txt) : 생성한 텍스트 노드를 strong 요소의 자식으로 추가합니다.
document.body.appendChild(s) : 완성된 strong 요소를 body 끝에 추가해 화면에 표시합니다.

실행 결과(Output)

위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.

HTML DOM Strong 객체 – 텍스트 강조 요소를 동적으로 다루는 방법

CREATE 버튼을 클릭하면 아래와 같이 굵은 글씨의 텍스트가 페이지에 추가됩니다.

HTML DOM Strong 객체 – 텍스트 강조 요소를 동적으로 다루는 방법

이처럼 HTML DOM의 Strong 객체를 활용하면 사용자의 동작에 반응하여 텍스트 강조 요소를 실시간으로 생성하고 조작할 수 있습니다.