Wrap an HTML fragment with another one.
Hi Guys,
I need your help! I have want to create a graphical border (using background image) over some adjacent HTML elements. For this I need to wrap (decorate) those elements with a predefined HTML fragment. The DOM state before decoration should be like this:
<elements to wrap>
and after decoration I need the following:
<div class="rc">
<div class="content">
<div class="wrapper">
<div class="t"></div>
<div class="hd"></div>
<div class="bd">
<elements to wrap><!--These are the elements to be wrapped-->
</div>
<div class="ft"></div>
</div>
</div>
<div class="b"><div></div></div>
</div>
I tried the wrap() method, but is not suitable for my case because the <elements to wrap> do not end up where I need.
I did an ugly workaround like this:
$(elements).wrap("<div class='rc'><div class='content'><div class='wrapper'><div class='bd'>").parent().before("<div class='t'></div><div class='hd'></div>").after("<div class='ft'/>").parent().parent().after("<div class='b'><div></div></div>");
I hope there is a better solution. Please help.
Thanks.