HTML DOM ins cite 속성 완벽 가이드

HTML DOM의 ins cite 속성은 텍스트가 삽입된 이유를 설명하는 문서의 URL을 반환합니다. <ins> 요소는 문서에 삽입된 텍스트를 나타내며, cite 속성을 통해 해당 변경 사항의 근거가 되는 출처를 확인할 수 있습니다.

문법

ins cite 속성의 기본 문법은 다음과 같습니다.

문자열 값을 반환합니다.

insObject.cite

예제

다음은 ins cite 속성을 활용한 예제입니다. 버튼을 클릭하면 삽입된 텍스트의 근거 문서 URL이 화면에 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<title>ins cite</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>ins-cite</legend>
<h1>사실:</h1>
<p>물은 달 표면에 존재할 수 없다.<ins id="newInfo" cite="https://www.example.com/water-ice-moon-surface-confirmed.html">2018년 달에서 물 얼음이 발견되었다.</ins>
</p>
<input type="button" onclick="showURL()" value="근거 보기">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var insCite = document.getElementById("newInfo");
    function showURL() {
        divDisplay.textContent = '근거 문서: '+insCite.cite;
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

'근거 보기' 버튼을 클릭하기 전 화면입니다.

HTML DOM ins cite 속성 완벽 가이드

'근거 보기' 버튼을 클릭한 후에는 삽입된 텍스트의 출처 URL이 div 영역에 표시됩니다.

HTML DOM ins cite 속성 완벽 가이드

정리

ins cite 속성은 읽기 전용으로 동작하며, <ins> 요소의 cite 속성값인 URL 문자열을 그대로 반환합니다. 문서 수정 이력의 투명성을 높이고 변경 사항의 신뢰성을 검증할 수 있도록 도와주는 유용한 속성입니다.