Demo JQuery .wrap(), .wrapInner(), .wrapAll() dan .unwrap()

by Taufik Nurrohman

HTML

<div>Lorem ipsum dolor sit amet-amet jabang bayi oek-oek mamamia telenovela.</div>

<br>
<button><span class="inner">Klik tombol ini!</span></button>

<br>
<br>
<br>
<span class="item">Item 1</span>
<span class="item">Item 2</span>
<span>Item 3</span>
<span class="item">Item 4</span>
<span class="not-item">Item 5</span>
<span class="not-item">Item 6</span>
<span class="item">Item 7</span>
<span class="item">Item 8</span>

CSS

body {padding:50px;}

div {
  border:4px solid #900;
  margin:10px;
  padding:10px;    
}

section {
  border:4px solid #090;   
}

p {
  border:4px solid #009;
}

span {display:block;}

JavaScript

// .wrap() & .wrapInner()
$('div').wrap('<section></section>').wrapInner('<p></p>');

// .unwrap()
$('button').click(function() {
   $('span.inner', this).unwrap(); 
});

// .wrapAll()
$('span.item').wrapAll('<p></p>');