appendTo() 함수
이전에 사용했던 append() 함수와 마찬가지로 태그를 추가하는 함수입니다.
방식의 차이인데요. 용도에 맞게 사용하시면 되겠습니다.
append() 함수는 (부모태그선택).append(들어갈태그내용) 의 방식으로 사용을 했다면
appendTo() 함수는 (들어갈태그내용).appendTo(부모태그선택) 의 방식으로 사용합니다.
보통 저의 경우에는 append()를 많이 사용했습니다.
둘중 처음접한 함수이기도 하고 한번 써본 방식을 벗어나질 않게 되는 문제 때문이죠^^
계속 사용하게 되었고 appendTo는 개발하다 중간중간 아차 이거로 쓰면 되겠네. 라고 생각이 났을때 쓰는정도^^;
(유용한함수인데 못쓰는 저의 문제 일수도 있겠네요)
append()를 써야만한다거나, appendTo()를 써야만하는 경우가 어떠한 경우가 있을지는 모르겠으나,
코딩을 하며 어떤것을 썻을때 더 편리한지를 생각해보고 판단하는 것이 맞다고 생각 합니다.
실습을 해보도록 하구요
appendTo()를 사용하는 경우에 대해서는 이후 다른 함수를 실습해볼때 한번 이용해보도록 하겠습니다^^
<head>
<title>제목 없음</title>
<style type="text/css">
/* 구분을 위해 스타일 적용하기 */
.box { clear:both; }
.div_class { float:left; 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 { border-color:#dddddd;}
#div2_id { clear:both; border-color:red;}
#div3_id { 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">div2_id : append()로 추가하는 부분</span><br />
</div>
<div id="div3_id" class="div_class">
<span class="span_class">div3_id : appendTo()로 추가하는 부분</span><br />
</div>
</div>
<div class="box">
<button type="button" onclick="btn1();">append()로 입력하기</button>
<button type="button" onclick="btn2();">appendTo()로 입력하기</button>
<button type="button" onclick="btn3();">지우기</button>
</div>
<script type="text/javascript">
// jQuery 실습하기!!
// append()로 추가하는 경우
function btn1() {
jQuery("#div2_id").append("<span class=\"span_class\">"+jQuery("#txt_memo").val()+"</span><br />");
jQuery("#txt_memo").val("");
}
// appendTo()로 추가하는 경우
function btn2() {
jQuery("<span class=\"span_class\">"+jQuery("#txt_memo").val()+"</span><br />").appendTo("#div3_id");
jQuery("#txt_memo").val("");
}
// 입력한 내용들을 삭제합니다. remove() : 삭제함수
function btn3() {
jQuery(".div_class>span").remove();
}
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery attribute selector (0) | 2017.12.18 |
|---|---|
| jquery each() (0) | 2017.12.16 |
| jquery closest() (0) | 2017.12.14 |
| jquery click() (0) | 2017.12.13 |
| jquery hide() show() (0) | 2017.12.12 |
댓글