Sanjeev K Sanjeev K - 18 days ago 5
HTML Question

wrap content in a div using jquery

I am trying to wrap content in a div but the problem is the html page is not editable so I am trying other way, using jQuery to wrap all the content in a

div
following is the
html
structure



$(document).ready(function() {
$("hr").before("<div class=wrapElement>");
$("#disqus_thread").before("</div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="disqus_thread"></div>





Problem opening
div
is placed on correct position, but closing div is not on correct position, it should be above
div id="disqus_thread"
but its not there, how do I get it placed on this position?

jQuery version is 1.12.4

thanks in advance

Answer

Use nextUntil() method to get all eleemnts upto the div and usewrapAll() method to wrap them using a div element.

$(document).ready(function() {
  $("hr").nextUntil("#disqus_thread") // get elements from hr upto the previous element of #disqus_thread
       .wrapAll("<div class=wrapElement></div>"); // wrap all elements using div
});

$(document).ready(function() {
  $("hr").nextUntil("#disqus_thread").wrapAll("<div class=wrapElement></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="disqus_thread"></div>

Comments