HTML DOM의 createComment() 메서드는 지정한 텍스트를 포함하는 주석(comment) 노드를 새로 생성하는 데 사용됩니다. 이 메서드는 생성할 주석 내용을 문자열 형태의 매개변수로 전달받습니다. 주석은 웹 페이지 화면에는 표시되지 않기 때문에, 메서드를 실행한 후에는 브라우저의 개발자 도구로 HTML 문서를 직접 검사(inspect)해야 생성된 주석을 확인할 수 있습니다.
문법(Syntax)
createComment() 메서드의 기본 문법은 다음과 같습니다.
document.createComment( text );
여기서 text는 주석에 추가할 데이터를 담고 있는 문자열(string) 타입의 값입니다.
예제(Example)
createComment() 메서드의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 이 HTML 문서에 주석이 생성되어 추가됩니다.</p>
<button onclick="Comment()">COMMENT</button>
<p id="Sample"></p>
<script>
function Comment() {
var x = document.createComment("This is a sample comment");
document.body.appendChild(x);
var p = document.getElementById("Sample");
x.innerHTML = "The comment was added and can only be seen in the HTML document only";
}
</script>
<p>개발자 도구로 코드를 검사하면 HTML 문서 안에 생성된 주석을 확인할 수 있습니다.</p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
COMMENT 버튼을 클릭한 후 개발자 도구로 HTML 문서를 검사하면, 다음과 같이 주석이 추가된 것을 확인할 수 있습니다.
코드 분석
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. 버튼 생성 및 이벤트 연결
먼저 COMMENT 버튼을 만들고, 사용자가 클릭했을 때 Comment() 함수가 실행되도록 onclick 이벤트를 연결합니다.
<button onclick="Comment()">COMMENT</button>
2. 주석 노드 생성
Comment() 함수는 document 객체의 createComment() 메서드를 호출하여, 매개변수로 전달된 메시지를 내용으로 하는 주석 노드를 생성합니다. 생성된 주석 노드는 변수 x에 할당됩니다.
3. 문서에 주석 추가
생성된 주석은 document.body의 appendChild() 메서드를 통해 문서 본문(body) 끝에 추가됩니다. 이때 앞에서 만든 주석 노드가 appendChild()의 매개변수로 전달됩니다.
4. 결과 메시지 출력
마지막으로 getElementById()로 <p> 요소를 가져온 뒤 innerHTML 속성 값을 설정하여, 사용자에게 주석이 추가되었음을 알리는 메시지를 화면에 표시합니다.
function Comment() {
var x = document.createComment("This is a sample comment");
document.body.appendChild(x);
var p = document.getElementById("Sample");
x.innerHTML = "The comment was added and can only be seen in the HTML document only";
}이처럼 createComment() 메서드는 자바스크립트만으로 HTML 문서에 주석을 동적으로 삽입할 수 있는 유용한 기능을 제공합니다. 특히 디버깅용 메모나 문서 구조에 대한 설명을 프로그램적으로 남겨야 할 때 활용할 수 있습니다.