jQuery 공작소 : .replaceWith()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
replaceWith 메서드는 해당 요소를 지정한 태그로 바꿉니다.
예제 1
기본 예제 - div 를 img 로 바꾸기
보기
jQuery 공작소
jQuery 공작소
jQuery 공작소
소스
<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
box-shadow : 0 0 5px silver;
padding : 10px;
}
.css_test div, .css_test p {
margin : 5px;
padding : 10px;
font-weight : bold;
font-size : 16pt !important;
}
.css_test img {
margin : 5px;
}
</style>
<button type="button" onclick="j_test()">바뀌어랏~!</button>
<div class="css_test">
<div>jQuery 공작소</div>
<p>jQuery 공작소</p>
<div>jQuery 공작소</div>
</div>
<script type="text/javascript">
function j_test(){
$('.css_test div').replaceWith('<img src="https://t1.daumcdn.net/cfile/tistory/22528D4C550B9B3A03" />');
}
</script>
.css_test {
border-radius : 5px;
border : 5px solid gray;
box-shadow : 0 0 5px silver;
padding : 10px;
}
.css_test div, .css_test p {
margin : 5px;
padding : 10px;
font-weight : bold;
font-size : 16pt !important;
}
.css_test img {
margin : 5px;
}
</style>
<button type="button" onclick="j_test()">바뀌어랏~!</button>
<div class="css_test">
<div>jQuery 공작소</div>
<p>jQuery 공작소</p>
<div>jQuery 공작소</div>
</div>
<script type="text/javascript">
function j_test(){
$('.css_test div').replaceWith('<img src="https://t1.daumcdn.net/cfile/tistory/22528D4C550B9B3A03" />');
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).replaceWith( 'html 태그' ) - 셀렉터에 해당하는 요소를 지정한 html 태그로 바꿉니다.
$( '.css_test div' ).replaceWith( '<img src="이미지주소" />' )
- 클래스명이 css_test 인 요소의 div 를 지정한 이미지 태그로 바꿉니다.
+ 관련 jQuery +
jQuery 홈페이지 .replaceWith() API 문서 : http://api.jquery.com/replaceWith/