Javascript

1. $('#code1-execute-wrapInner').on('click', function () {
2.     $('#code-sample1 p').wrapInner('<span></span>');
3. });
4.  

HTML

1. <span class="cq-btn m-primary" id="code1-execute-wrapInner">wrapInner()</span>
2.  
3. <div id="code-sample1">
4.     <p>test1</p>
5. </div>

CSS

1. #code-sample1 span {
2.     display: inline-block;
3.     padding: 4px;
4.     border: 2px dotted #456f9a;
5. }
6.  

Javascript

1. var target = $('#code2 .target');
2. $('#code2 .code2-execute').on('click', function(e){
3.     target.wrap(function(index){
4.         return $('<p></p>', {class: $(e.target).text()});
5.     });
6. });
7.  
8.  

HTML

1. <div id="code2">
2.     <div class="code2-nav">
3.         <span class="cq-btn code2-execute">solid</span>
4.         <span class="cq-btn cq-btn-danger code2-execute">dotted</span>
5.         <span class="cq-btn cq-btn-info code2-execute">double</span>
6.     </div>
7.  
8.     <span class="target">test1</span>
9. </div>

CSS

1. #code2 p {
2.     padding: 4px;
3. }
4.  
5. #code2 p.solid {
6.     border: 2px solid #DD2266;
7. }
8.  
9. #code2 p.double {
10.     border: 3px double #0000ff;
11. }
12.  
13. #code2 p.dotted {
14.     border: 2px dotted #3d903d;
15. }