HTML DOM의 createAttribute() 메서드는 자바스크립트를 이용해 HTML 요소에 새로운 속성(attribute)을 동적으로 생성할 때 사용됩니다. 이 메서드는 지정한 이름으로 속성을 만들고, 그 결과를 Attr 객체 형태로 반환합니다.
구문(Syntax)
createAttribute() 메서드의 기본 구문은 다음과 같습니다.
document.createAttribute(attributename)
매개변수 및 반환값
- attributename : 생성할 속성의 이름을 지정합니다. (필수)
- 반환값 : 생성된 속성을 나타내는 Attr 객체를 반환합니다.
참고로, createAttribute()로 속성을 생성만 한 상태에서는 아무 변화가 없으며, 반드시 setAttributeNode() 메서드를 통해 대상 요소에 추가해야 실제로 적용됩니다.
예제(Example)
HTML DOM createAttribute() 메서드의 실제 사용 예제를 살펴보겠습니다. 아래 예제는 버튼을 클릭하면 div 요소에 "id" 속성을 동적으로 생성하고 스타일을 적용하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>CREATE ATTRIBUTE</title>
<style>
#DIV1{
margin-top:15px;
width:250px;
height:200px;
border:2px solid blue;
background-color:lightgreen;
}
</style>
</head>
<body>
<p>버튼을 클릭하면 div 요소에 "id" 속성이 생성됩니다</p>
<button onclick="attrCreate()">CREATE</button>
<br>
<div>
<p>This is a sample div</p>
</div>
<script>
function attrCreate() {
var x = document.getElementsByTagName("div")[0];
var att = document.createAttribute("id");
att.value = "DIV1";
x.setAttributeNode(att);
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 CREATE 버튼을 클릭하면 다음과 같이 div 요소에 초록색 배경과 파란색 테두리 스타일이 적용됩니다.
코드 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
먼저, id가 "DIV1"인 CSS 스타일을 정의했습니다.
#DIV1{
margin-top:15px;
width:250px;
height:200px;
border:2px solid blue;
background-color:lightgreen;
}
그다음, 내부에 <p> 요소를 포함하는 <div> 요소를 마크업으로 작성했습니다.
<div> <p>This is a sample div</p> </div>
그리고 사용자가 클릭하면 attrCreate() 함수를 실행하는 CREATE 버튼을 배치했습니다.
<button onclick="attrCreate()">CREATE</button>
attrCreate() 함수는 document 객체의 getElementsByTagName() 메서드를 사용해 문서에서 첫 번째 <div> 요소를 가져와 변수 x에 할당합니다. 이어서 createAttribute() 메서드로 "id" 속성을 생성하고, value 프로퍼티를 통해 "DIV1"이라는 값을 지정합니다. 이 값은 앞서 정의한 스타일의 id와 동일하기 때문에, 속성이 추가되는 순간 해당 스타일이 div 요소에 적용됩니다. 마지막으로 setAttributeNode() 메서드를 사용해 생성한 "id" 속성을 <div> 요소에 설정합니다.
function attrCreate() {
var x = document.getElementsByTagName("div")[0];
var att = document.createAttribute("id");
att.value = "DIV1";
x.setAttributeNode(att);
}