How do I encapsulate a tag within another tag using jQuery or JavaScript?
<p>I have a container <code>div</code> that contains some <code>img</code> tags. When I click on a <code>img</code> tag, it returns me the index position of that <code>img</code> tag within the <code>div</code> tag. I would like to wrap this <code>img</code> tag within another <code>div</code> tag either using jQuery or JavaScript --- is there any way to do this?</p>

<p>I am Working With a Wordpress plugin (the  Slide show gallery) which displays the thumbnails of large images on clicking the thumnail i want to show a arrow that shows which current slide is beiging displaying.. after exploring the js files that comes along with plugin found that they are using pure javascript.</p>

<p>Currently i am using this code.</p>

<pre><code>    for(i;i&lt;this.l;i++){
        this.a[i]={};
        var h=m[i], a=this.a[i];
        a.t= tag('h3',h)[0].innerHTML;
        a.d= tag('p',h)[0].innerHTML;
        a.l= tag('a',h)[0]? tag('a',h)[0].href:'';
        a.p= tag('span',h)[0].innerHTML;
        if(this.thumbs){
            var g = tag('img',h)[0];
            this.p.appendChild(g);
            w+=parseInt(g.offsetWidth);
            if(i!=this.l-1){
                g.style.marginRight=this.spacing+'px';
                w+=this.spacing
            }
            this.p.style.width=w+'px';
            g.style.opacity=this.thumbOpacity/100;
            g.style.filter='alpha(opacity='+this.thumbOpacity+')';
            g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
            g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
            g.onclick=new Function(this.n+'.pr('+i+',1)');
            //g.onclick = new Function(this.n)
        }
    }
</code></pre>
