CODEWITHSUNDEEP
javascriptjqueryhtml
Vallabh Lakade
Vallabh Lakade

Reputation: 832

Wrapping using jquery

I have a variable wrapper with data:

<div class="elementwrapper" draggable="true" ondragstart="drag(event)" >    
<span class="edittool">
    <span class="glyphicon glyphicon-pencil editpencil" onclick="editContent(this);" style="padding:0 5px 0 0;"></span>
    <span class="glyphicon glyphicon-ok editok" onclick="doneEdit(this);" style="display:none;padding:0 5px 0 0;"></span>
    <span class="glyphicon glyphicon-remove editcancel" onclick="doneEdit(this);" style="display:none;padding:0 5px 0 0;"></span>
</span>     
</div>

I want to wrap my current elements data inside the span with class edittool. I used:

$(currentElement).wrap(wrapper);

But what I am getting is:

 <div class="elementwrapper" draggable="true" ondragstart="drag(event)" >   
<span class="edittool">
    <span class="glyphicon glyphicon-pencil editpencil" onclick="editContent(this);" style="padding:0 5px 0 0;">
        MY DATA
    </span>
    <span class="glyphicon glyphicon-ok editok" onclick="doneEdit(this);" style="display:none;padding:0 5px 0 0;"></span>
    <span class="glyphicon glyphicon-remove editcancel" onclick="doneEdit(this);" style="display:none;padding:0 5px 0 0;"></span>
</span>     
</div>

It should be inside edittool span and after all its inner spans. How can I do it?

Upvotes: 0

Views: 43

Answers (2)

Madalina Taina
Madalina Taina

Reputation: 1978

var content = "<div class='new'></div>";
$( ".edittool" ).wrapInner( content );

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

You can use .append() to put your data inside span. see below code 

$(function(){
   var wrapper = "MY DATA";
   $('span.edittool').append(wrapper);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="elementwrapper" draggable="true" ondragstart="drag(event)" >   
<span class="edittool">
    <span class="glyphicon glyphicon-pencil editpencil" onclick="editContent(this);" style="padding:0 5px 0 0;">
    </span>
    <span class="glyphicon glyphicon-ok editok" onclick="doneEdit(this);" style="display:none;padding:0 5px 0 0;"></span>
    <span class="glyphicon glyphicon-remove editcancel" onclick="doneEdit(this);" style="display:none;padding:0 5px 0 0;"></span>
</span>     
</div>

Upvotes: 2

Related Questions