• Q&A
  • 회원가입
  • 로그인

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

94  

목차

  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>

 

결과보기



찾아주셔서 감사합니다. Since 2012