HTML DOM의 ins 객체는 HTML 문서 내 <ins> 요소를 나타냅니다. <ins> 태그는 문서에 새로 추가된 텍스트(삽입된 내용)를 표시할 때 사용되며, 브라우저에서는 일반적으로 밑줄이 그어진 형태로 렌더링됩니다.
ins 객체 생성하기
문법
ins 객체를 생성하는 기본 문법은 다음과 같습니다.
document.createElement("INS");ins 객체의 속성
ins 객체에서 제공하는 주요 속성은 아래와 같습니다.
| 속성 | 설명 |
|---|---|
| cite | HTML 문서에서 ins 요소의 cite 속성값을 반환하거나 변경합니다. cite 속성은 해당 삽입 내용에 대한 출처(참고 문서 URL)를 지정합니다. |
| dateTime | HTML 문서에서 ins 요소의 datetime 속성값을 반환하거나 변경합니다. datetime 속성은 텍스트가 삽입된 날짜와 시간을 지정합니다. |
ins 객체 예제
다음 예제는 버튼 클릭 시 동적으로 ins 객체를 생성하여 페이지에 추가하는 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
text-align: center;
background-color: #fff;
color: #0197F6;
}
h1 {
color: #23CE6B;
}
</style>
<body>
<h1>DOM ins Object Demo</h1>
<button onclick="createIns()" class="btn">Create an ins object</button>
<script>
function createIns() {
var insElement = document.createElement("INS");
insElement.innerHTML = 'I\'m a <ins> element in HTML';
document.body.appendChild(insElement);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
Create an ins object(ins 객체 생성) 버튼을 클릭하면, JavaScript의 document.createElement("INS") 메서드를 통해 새로운 ins 요소가 만들어지고 appendChild()를 통해 문서 본문에 추가됩니다.
이처럼 ins 객체를 활용하면 문서 수정 이력을 나타내는 삽입된 텍스트를 동적으로 생성하고 제어할 수 있습니다. 특히 협업 문서 편집기나 버전 관리가 필요한 웹 애플리케이션에서 유용하게 활용됩니다.