jQuery 기초 append() 실습
오늘은 태그를 추가하는 용도로 사용하는 append() 함수를 활용해보려고 합니다.
중간중간 이전에 실습하지 않았던 val() 함수와 remove() 함수가 나오는데요
이것은 실습간단히 설명으로 끝내려고 하니다.
val() 함수는 input 태그 (text박스)에 입력한 값을 가져올 때 사용합니다.
내용을 입력하고 입력하기 버튼을 누르면 우측 파란색 박스에 입력한 내용이 입력됩니다. (한줄단위로)
그리고 새로 입력을 하기 위해 input 태그의 값은 초기화를 해주고 있습니다.
remove() 함수는 태그를 삭제할 때 사용합니다.
<head>
<title>제목 없음</title>
<style type="text/css">
/* 구분을 위해 스타일 적용하기 */
.box { clear:both; }
.div_class { border:1px solid; margin:10px 0; padding:10px; line-height:24px; } /* div_class는 모두 적용하기 */
.span_class { border:1px solid #ddd; } /* span_class는 모두 적용하기 */
.span_textblue { color:blue; } /* 텍스트색상 파란색으로 */
.span_textred { color:red; } /* 텍스트색상 빨간색으로 */
#div1_id { float:left; border-color:red;}
#div2_id { float:left; border-color:blue;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<!-- jQuery 스터디 attr() -->
<div class="box">
<div id="div1_id" class="div_class">
내용 : <input type="text" id="txt_memo" value="" />
</div>
<div id="div2_id" class="div_class">
<span class="span_class">입력한내용 123456788</span><br />
</div>
</div>
<div class="box">
<button type="button" onclick="btn1();">입력하기</button>
<button type="button" onclick="btn2();">지우기</button>
</div>
<script type="text/javascript">
// jQuery 실습하기!!
// 텍스트 박스에 입력한 내용을 표시합니다.
function btn1() {
jQuery("#div2_id").append("<span class=\"span_class\">"+jQuery("#txt_memo").val()+"</span><br />");
jQuery("#txt_memo").val("");
}
// 입력한 내용들을 삭제합니다. remove() : 삭제함수
function btn2() {
jQuery("#div2_id>span").remove();
}
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery click() (0) | 2017.12.13 |
|---|---|
| jquery hide() show() (0) | 2017.12.12 |
| jquery eq() (0) | 2017.12.09 |
| jquery attr() (0) | 2017.12.08 |
| jquery select() (0) | 2017.12.08 |
댓글