CODEWITHSUNDEEP
javascriptjqueryhtml
knitevision
knitevision

Reputation: 3153

How to wrap button's HTML in a div?

Using jQuery, I tried to wrap each button element's HTML into a div.

jsfiddle link

jQuery

$('button').each(function(){
    var markup = $(this).html();
    console.log(markup);


    //This doesn't work
    //markup.each(function(){
    //  $(this).wrap('<div></div');
    //})

    //This doesn't work either
    //markup.wrap('<div></div>');
});

I get TypeError: markup.wrap is not a function for the last not-working attempt and something similar to the 1st

My final goal is: wrap each button's content (it can include tags within too as shown in the JSFiddle) in a div

Any ideas?

Upvotes: 2

Views: 2479

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206699

You don't need to iterate over .each().
$("button") is already a collection of all your "button" elements.

Wrap the selector into another element:

http://api.jquery.com/wrap/

$("button").wrap("<div />");
div{
  background: #0FF1CE;
  padding: 10px;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button 1</button>
<button>Button 2</button>

Wrap element's content into another element:

If you want to wrap everything an element has, into another element, use:
http://api.jquery.com/wrapinner/

For your notice, it's incorrect HTML markup to use block level elements inside a <button> http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element → so let's use <span> in this example:

$("button").wrapInner("<span />");
span{
  background: #0FF1CE;
  color:      #EFFEC7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button><i>Button</i> <b>1</b></button>
<button><i>Button</i> <b>2</b></button>

Upvotes: 5

guest271314
guest271314

Reputation: 1

If interpret Question correctly, try using .html()

$("button").html(function(index, html) {
  return "<div>" + html + "</div>"
})

Upvotes: 1

shalikas
shalikas

Reputation: 146

You can simply use wrapInner:

    $(this).wrapInner( "<div></div>" );

jsfiddle: http://jsfiddle.net/hzj643tt/

Upvotes: 1

Related Questions