jQuery Tutorial for Beginners #10 - Wrap and Unwrap Elements

Heeeey gang. In this jQuery tutorial for beginners, I'll show you how we can wrap and unwrap HTML elements in jQuery. This technique has quite a lot of uses, such as placing a disabling wrapper over a button you do not want to be pressed.

The 3 jQuery methods I'll be showing you are wrap() , unwrap() & wrapAll(). Any questions, just ask :).

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[bdardik]

Hey man, I'm an experienced software engineer doing server side(3 years while serving in the army 2 more years at a startup)and i think that your tutorials are a delight very clear and fast phased keep up the good work

[AngelaAndrews]

Hours of unwrapping/ wrapping fun! Wow, this was a good one.

[pastuh]

Once i used Wrap for youtube videos. And it was only solution ^^

[Ivsti]

the wrapAll() has to work if and only if what its wrapping is on the same level yh?

[divyanshubhatnagar]

Can we access the webpage you are using for showcasing the examples? I want to see the HTML. Thanks

[Sama-mnhh]

Hey man, just wanna say awesome tutorial and I have a question: Why didn’t you use the .toggle() method instead of writing the process down in a function yourself?

[ajitsinghal]

$("section").unwrap() --> if there are more than one section tag then which tag will be unwrapped?

[adamchilds]

I can't get this to work my code is exactly them same

[yasincimic]

Another way :

var wrapper = "<div class='wrapper'>";
var is_wrapped = true;


if(is_wrapped){
$("section").unwrap();
$(".button").text("wrap");
is_wrapped=false;
}else{

$(".button").text("unwrap");
is_wrapped=true;
}
})

[emmanuelekwere]

please ninja mentor. Why not use $(‘.wrapper’). Instead of “<div class = ‘wrapper’>