jQuery 공작소 : .wrapInner()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
wrapInner 메서드는 해당 요소안의 내용을 지정한 태그로 둘러쌉니다.
예제 1
기본 예제 - 클릭한 사진 div 태그로 둘러싸기
보기
아래 글자를 클릭해 보세요~!
jQuery 공작소
jQuery 공작소
위의 태그 보기
소스
<style type="text/css">
.css_test img {
cursor : pointer;
margin : 5px;
width : 250px;
}
.css_test div {
border-radius : 5px;
border : 3px solid gray;
margin : 5px;
padding : 10px;
}
.css_test span {
background : #FFD7EB;
color : #FF0080;
font-weight : bold;
padding : 5px;
}
.css_test2 textarea {
border-radius : 5px;
border : 3px solid gray;
box-shadow : 0 0 5px silver;
height : 80px;
margin-top : 5px;
width : 100%;
}
</style>
아래 글자를 클릭해 보세요~!<br><br>
<div class="css_test">
<div onclick="j_test( this )">jQuery 공작소</div>
<div onclick="j_test( this )">jQuery 공작소</div>
</div>
<div class="css_test2 mt20">
<b>위의 태그 보기</b><br>
<textarea></textarea>
</div>
<script type="text/javascript">
function j_test(o){
$(o).wrapInner('<span />');
j_test2();
}
// 태그의 내용을 보여주기
function j_test2(){
$( '.css_test2 textarea' ).val( $('.css_test').html() );
}
j_test2();
</script>
.css_test img {
cursor : pointer;
margin : 5px;
width : 250px;
}
.css_test div {
border-radius : 5px;
border : 3px solid gray;
margin : 5px;
padding : 10px;
}
.css_test span {
background : #FFD7EB;
color : #FF0080;
font-weight : bold;
padding : 5px;
}
.css_test2 textarea {
border-radius : 5px;
border : 3px solid gray;
box-shadow : 0 0 5px silver;
height : 80px;
margin-top : 5px;
width : 100%;
}
</style>
아래 글자를 클릭해 보세요~!<br><br>
<div class="css_test">
<div onclick="j_test( this )">jQuery 공작소</div>
<div onclick="j_test( this )">jQuery 공작소</div>
</div>
<div class="css_test2 mt20">
<b>위의 태그 보기</b><br>
<textarea></textarea>
</div>
<script type="text/javascript">
function j_test(o){
$(o).wrapInner('<span />');
j_test2();
}
// 태그의 내용을 보여주기
function j_test2(){
$( '.css_test2 textarea' ).val( $('.css_test').html() );
}
j_test2();
</script>
관련 CSS
jQuery
$( 셀렉터 ).wrapInner( 태그 ) - 지정한 셀렉터의 내용을 태그로 둘러쌉니다. 겉이 아닌 안에서 둘러쌉니다.
$( 'div' ).wrapInner( '<span />' ) - div 태그요소의 내용을 span 으로 둘러쌉니다.
<div>jQuery 공작소</div> 에 위 제이쿼리를 실행하면
<div><span>jQuery 공작소</span></div> 이렇게 됩니다.
+ 관련 jQuery +
jQuery 홈페이지 .wrapInner() API 문서 : http://api.jquery.com/wrapInner/