how to create a div around a pre tag

Question

I have some code which is in a pre tag. the output is this:

<div class="Message">
   <pre class="Codeblock>
       <!-- code goes here -->
   </pre>
</div>

Now I want to create a div around this pre block like this:

<div class="Message">
   <div id="firstblock">
     <pre class="Codeblock>
         <!-- code goes here -->
     </pre>
   </div>
</div>

I tried already this:

var extradiv = document.createElement('div');
extradiv.id = 'firstblock';
$('.Message').prepend(extradiv);

But that creates the div open end close before the pre tag

are you using jQuery or plain JS? Because there's no jQuery tag yet you are using jQuery syntax — nem035, Dec 10 '15 at 20:08
What I would do here, is to find the parent element of the `pre` tag, insert the wrapper appended to the parent, remove and re-insert the pre into the new wrapper. — Sterling Archer, Dec 10 '15 at 20:10
I am using both because jquery is already loaded for the Message class — nuet, Dec 10 '15 at 20:10

score 5 · Accepted Answer · edited Dec 10 '15 at 20:13

5

wrap() will surround the pre tag for you:

$('.Message .Codeblock').wrap('<div id=firstblock></div>');

edited Dec 10 '15 at 20:13

nem035

answered Dec 10 '15 at 20:10

Paul Roub

1 Answers1