HTML DOM Code 객체란? 개념부터 실전 예제까지 한눈에

HTML DOM Code 객체는 HTML5의 <code> 태그와 연결된 객체입니다. 웹 페이지에서 프로그래밍 코드 조각을 마크업할 때 <code> 요소로 해당 코드를 감싸게 되는데, 이때 Code 객체가 바로 그 <code> 요소를 대표하게 됩니다.

Code 객체 생성 문법

JavaScript에서 Code 객체를 새로 생성하려면 document 객체의 createElement() 메서드를 사용합니다.

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

실전 예제

버튼을 클릭하면 텍스트가 포함된 CODE 요소를 동적으로 생성하는 예제입니다.

<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 텍스트가 포함된 CODE 요소가 생성됩니다</p>
<button onclick="createCode()">생성</button><br><br>
<script>
    function createCode() {
        var x = document.createElement("CODE");
        var t = document.createTextNode("print('HELLO WORLD')");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Code 객체란? 개념부터 실전 예제까지 한눈에

생성 버튼을 클릭하면 아래처럼 CODE 요소가 화면에 추가됩니다.

HTML DOM Code 객체란? 개념부터 실전 예제까지 한눈에

코드 상세 설명

먼저, 사용자가 클릭하면 createCode() 함수를 실행하는 버튼을 만듭니다.

<button onclick="createCode()">생성</button><br><br>

createCode() 함수 내부에서는 다음 순서로 작업이 진행됩니다.

CODE 요소 생성 : document 객체의 createElement("CODE") 메서드를 호출해 새로운 <code> 요소를 만들고, 이를 변수 x에 할당합니다.
텍스트 노드 생성 : createTextNode() 메서드를 사용해 "print('HELLO WORLD')"라는 텍스트 노드를 생성합니다.
텍스트 노드 추가 : appendChild() 메서드로 텍스트 노드를 <code> 요소(x)의 자식으로 붙입니다.
본문에 추가 : 마지막으로 appendChild() 메서드를 사용해 <code> 요소 전체를 문서의 body에 자식으로 추가합니다.

function createCode() {
    var x = document.createElement("CODE");
    var t = document.createTextNode("print('HELLO WORLD')");
    x.appendChild(t);
    document.body.appendChild(x);
}

이처럼 HTML DOM Code 객체를 활용하면 자바스크립트만으로 코드 블록을 동적으로 생성해 웹 페이지에 삽입할 수 있습니다. <code> 요소는 기본적으로 고정폭(monospace) 폰트로 표시되므로, 코드임을 시각적으로 명확하게 구분해 준다는 장점도 있습니다.