javascript - Wrap in special div tags -

i'm working template, have confused wrapping div tags on h2, script :

html:

<style> .widget-title{ border:3px solid black; } </style> <div id="widget"> <h2>title 1.1</h2> <ul>    <li>item 1.1.1</li>    <li>item 1.1.2</li>    <li>item 1.1.3</li> </ul> <br /> <h2>title 1.2</h2> <ul>    <li>item 1.2.1</li>    <li>item 1.2.2</li>    <li>item 1.2.3</li> </ul> </div> <br /> <div class="footer"> <h2>title 2</h2> <ul>    <li>item 1</li>    <li>item 2</li>    <li>item 3</li> </ul> </div> <script type="text/javascript"> document.getelementbyid('widget') $('h2').each(function(){    var self = $(this);    self.wrapall('<div class="widget-title" />'); }); </script> 

i want add tag every h2 tags, inside div id="widget" tags, mean like:

<div id="widget"><div class="widget-title"><h2>title</h2></div</div>  

just restrict selector h2s inside #widget , use wrap:

$('#widget h2').wrap('<div class="widget-title" />');