[Javascript] 제이쿼리 엘리먼트(Element) 존재 확인 사용법 & 예제
2020. 9. 23. 17:45
오늘은 자바스크립트에서 엘리먼트(Element)의 존재 유/무를 확인할수 있는 방벙에 대해서 알아보겠습니다. 개발을 하시면서 보통 특정 엘리먼트(Element)를 클릭하였을경우 hasClass() 함수를 사용하여 Class 존재 유/무를 파악하는 경우가 많습니다. 그러나 특이하게 특정 엘리먼트(Element)가 존재 유/무 구하는 경우도 있어서 긁을 써봅니다.
엘리먼트(Element) 존재 유무 확인 예제 & 사용법
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<script>
$(document).ready(function(){
$("#testBtn").click(function(){
if($("#testDiv")[0] != null || $("#testDiv")[0] != 'undifiend'){
alert("오브젝트 존재.");
} else{
alert("오브젝트 미존재.");
}
});
});
</script>
<body>
<button id="testBtn"></button>
<div id="testDiv"></div>
</body>
|
- 설명
$('class')[0]를 사용하여 현재 'testDiv'라는 Class를 가진 엘리먼트(Element)가 존재하는지 확인 할 수 있습니다.
엘리먼트(Element) 비교 후 엘리먼트(Element) 생성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script>
$(document).ready(function(){
$("#testBtn").click(function(){
if($("#testDiv")[0] != null || $("#testDiv") != 'undifiend'){
alert("오브젝트 존재.");
} else{
var div = $('<div>Hello Div</div>');
$("#bodyTest").append(div);
}
});
});
</script>
<body id="bodyTest">
<button id="testBtn"></button>
</body>
|
- 설명
특정 엘리먼트(Element)가 존재하지 않을경우 body 밑에 엘리먼트(Element)를 새로 생성합니다.
'JavaScript' 카테고리의 다른 글
| [Jquery] 제이쿼리 .append() .prepend() . .remove() .empty() 사용법 & 예제 (0) | 2021.01.12 |
|---|---|
| [JavaScript] 자바스크립트 Array() 배열 사용법 & 예제 배열 선언 방법 (0) | 2021.01.06 |
| [Javascript] 자바스크립트 체크박스 체크 유/무 확인방법 & 예제 (0) | 2020.05.11 |
| [JavaScript] 자바스크립트 window.open() 새창 열기 기능 사용방법 & 예제 (0) | 2020.05.08 |
| [ Jquery ] 제이쿼리 실시간 검색어 자동완성 ajax 통신 방법 & 예제 (2) | 2020.04.03 |
이 글을 공유합시다
