[HTML_CSS] JQ - wrapInner() 메서드 - 선택요소 안 내용을 지정 요소로 감싸기 (= wrapInner메서드 = 랩이너메서드)

목차

1. wrapInner() 예제 - HTML 요소로 감싸기
2. wrapInner() 정의
3. wrapInner() 구문
4. wrapInner() 예제 - DOM으로 요소 생성해 감싸기
5. wrapInner() 예제 - 함수 사용해 감싸기
6. 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

필수. 선택 요소 안 콘텐츠를 감쌀 요소 지정. (※ 가능값 리스트)

• HTML 요소
• JQEURY 객체
• DOM 요소

 

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>

 

결과보기