728x90
요소 추가하기
자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다.
- .createElement()
- .createTextNode()
- .appendChild()
.createElement()는 요소를 만듭니다. 예를 들어
.createElement( 'h1' )
은 다음과 같은 코드를 생성합니다.
<h1></h1>
.createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어
.createTextNode( 'My Text' )
는 My Text라는 문자열을 만듭니다.
.appendChild()는 선택한 요소 안에 자식 요소를 추가합니다.
다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbBtn = document.createElement( 'button' );
var jbBtnText = document.createTextNode( 'Click' );
jbBtn.appendChild( jbBtnText );
document.body.appendChild( jbBtn );
</script>
</body>
</html>
각 줄의 의미는 다음과 같습니다.
var jbBtn = document.createElement( 'button' );
button 요소를 만들고 jbBtn에 저장합니다.
var jbBtnText = document.createTextNode( 'Click' );
Click이라는 텍스트를 만들고 jbBtnText에 저장합니다.
jbBtn.appendChild( jbBtnText );
jbBtn에 jbBtnText를 넣습니다.
document.body.appendChild( jbBtn );
jbBtn을 body의 자식 요소로 넣습니다.
이벤트 등록하기
addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.
1
2
3
4
5
6
7
|
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.addEventListener('click', function(event){
alert('Hello world, '+event.target.value);
});
</script>
|
이 방식은 ie8이하에서는 호환되지 않는다. ie에서는 attachEvent 메소드를 사용해야 한다.
1
2
3
4
5
6
7
8
9
10
|
var t = document.getElementById('target');
if(t.addEventListener){
t.addEventListener('click', function(event){
alert('Hello world, '+event.target.value);
});
} else if(t.attachEvent){
t.attachEvent('onclick', function(event){
alert('Hello world, '+event.target.value);
})
}
|
이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다.
1
2
3
4
5
6
7
8
9
10
|
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.addEventListener('click', function(event){
alert(1);
});
t.addEventListener('click', function(event){
alert(2);
});
</script>
|
이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
var t1 = document.getElementById('target1');
var t2 = document.getElementById('target2');
function btn_listener(event){
switch(event.target.id){
case 'target1':
alert(1);
break;
case 'target2':
alert(2);
break;
}
}
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
</script>
|
728x90
'자바스크립트' 카테고리의 다른 글
[javascript] 노마드 무료 자바스크립트 공부[크롬 앱] (0) | 2022.06.15 |
---|---|
자바스크립트 정규식 (0) | 2022.04.21 |
JS[JavaScript] 이전 페이지로 돌아가기, History.Back(), History().Go() (0) | 2022.02.22 |
select 태그 안에 직접입력 만들기 (0) | 2022.02.04 |
자바스크립트 공부중 (0) | 2022.01.31 |
댓글