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?

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?

• javascript
• jquery
• html

• It's not valid HTML to put block-level elements tags into a <button>. I mean... you can but... – Roko C. Buljan Commented Oct 23, 2015 at 1:33

3 Answers 3

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./wrap/

$("button").wrap("<div />");

div{
  background: #0FF1CE;
  padding: 10px;
  margin: 5px;
}

<script src="https://ajax.googleapis./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./wrapinner/

^{For your notice, it's incorrect HTML markup to use block level elements inside a <button> http://www.w3/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./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>

You can simply use wrapInner:

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

jsfiddle: http://jsfiddle/hzj643tt/

If interpret Question correctly, try using .html()

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