I have this html structure (refer below)

<div class="pagination_info"></div>
<div class="pagination_numbers"></div>

Now, what I want is to add a start div tag before the .pagination_info div and add end div tag after the .pagination_numbers div so the expected output must be (refer below)

<div class="pagination_wrapper">
    <div class="pagination_info"></div>
    <div class="pagination_numbers"></div>
</div>

what I tried so far is (refer below)

$('.pagination_info').before('<div class="pagination_wrapper">');
$('.pagination_numbers').after('</div>');

so supposedly, what im trying to achieve is to wrap the .pagination_info div and .pagination_numbers with a parent div that has a class name "pagination_wrapper" but sadly unsuccessful yet. Any help, suggestion, remendation, ideas, clues to make this work will be greatly appreciated. Thank you.

I have this html structure (refer below)

<div class="pagination_info"></div>
<div class="pagination_numbers"></div>

Now, what I want is to add a start div tag before the .pagination_info div and add end div tag after the .pagination_numbers div so the expected output must be (refer below)

<div class="pagination_wrapper">
    <div class="pagination_info"></div>
    <div class="pagination_numbers"></div>
</div>

what I tried so far is (refer below)

$('.pagination_info').before('<div class="pagination_wrapper">');
$('.pagination_numbers').after('</div>');

so supposedly, what im trying to achieve is to wrap the .pagination_info div and .pagination_numbers with a parent div that has a class name "pagination_wrapper" but sadly unsuccessful yet. Any help, suggestion, remendation, ideas, clues to make this work will be greatly appreciated. Thank you.

• javascript
• jquery

• 2 You're thiking in text (HTML), but that's not what you're dealing with. You're dealing with elements in a tree (the DOM). The answers below show you how to work with the elements (jQuery has a function specifically for this). – T.J. Crowder Commented Apr 27, 2015 at 8:46

2 Answers 2

jQuery has a wrapAll method:

$(".pagination_info, .pagination_numbers").wrapAll("<div class=\"pagination_wrapper\">");

Working Example

.wrapAll() will wrap the two div's around the new div:

$(".pagination_info, .pagination_numbers").wrapAll("<div class='pagination_wrapper'>");

FIDDLE