목차
- wrapInner() 예제 - HTML 요소로 감싸기
- wrapInner() 정의
- wrapInner() 구문
- wrapInner() 예제 - DOM으로 요소 생성해 감싸기
- wrapInner() 예제 - 함수 사용해 감싸기
- wrapInner() 예제 - function(index) 옵션 사용
wrapInner() 예제 - HTML 요소로 감싸기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrapInner("<b></b>").css('color','red');
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>홈페이지 제작관리 강의</p>
<button>클릭</button>
결과보기
wrapInner() 정의
선택 요소 안의 각 콘텐츠를 지정 요소로 감싸기.
더 많은 예제는 아래 좌표 참고.
https://api.jquery.com/wrapInner/
wrapInner() 구문
$(selector).wrapInner(wrappingElement,function(index))
[매개변수]
wrappingElement
필수. 선택 요소 안 콘텐츠를 감쌀 요소 지정. (※ 가능값 리스트)
function(index)
선택. 감쌀 요소의 색인번호 포함하는 함수.
- index - 세트에서 요소의 색인위치 반환. (0부터 시작)
wrapInner() 예제 - DOM으로 요소 생성해 감싸기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrapInner(document.createElement("b"));
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>홈페이지 제작관리 강의</p>
<button>클릭</button>
결과보기
wrapInner() 예제 - 함수 사용해 감싸기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrapInner(function(){
return "<b></b>"
});
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>홈페이지 제작관리 강의</p>
<button>클릭</button>
결과보기
wrapInner() 예제 - function(index) 옵션 사용
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
$(function(){
$('#btn').one('click', function() {
$('.code').wrapInner( function(index, html) {
return '<div id=' + '"div' + index + '"><p><strong></strong></p></div>';
});
});
});
</style>
<style>
.hz div {
padding: 10px;
border: 1px solid black;
}
.hz #div0 {
background-color: yellow;
}
.hz #div1 {
background-color: blue;
color:white;
}
.hz #div2 {
background-color: red;
color:white;
}
</style>
<div class='hz'>
<p>
홈짱닷컴 Homzzang.com
<em class="code">HTML</em>
<em class="code">CSS</em>
<em class="code">JS</em>
</p>
</div>
<button id="btn">클릭</button>
결과보기
