How to insert a piece of code programmatically using jQuery?

Question

Hi guys,

I'm learning jQuery and I'd like to use it to solve an old problem that I get. I'd like to use jQuery to add a piece of HTML code programmatically. What I need to do is: create a jQuery function that "parses" all elements/objects that are inside a div. When my function get a img object, then I'd like to put the img inside another div.

To make the things clear, let's suppose that my function parses this piece of code:

<div class="entry">
<img height="200" width="300" src="image-2.jpg" title="my image 1" class="alignnone size-medium wp-image-25">
<em>This is my image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>

<img height="400" width="250" src="image-2.jpg" title="my image 2" class="alignnone size-medium wp-image-25">
<em>This is another image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>
</div>

I'd like to write a jQuery function that changes it to:

<div class="entry">
<div class="main-image">
    <img height="100" width="200" src="image-2.jpg" title="my image 1" class="attachment-single-post-image wp-post-image">
</div>
<em>This is my image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>

<div class="main-image">
    <img height="100" width="200" src="image-2.jpg" title="my image 2" class="attachment-single-post-image wp-post-image">
</div>
<em>This is another image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>
</div>

Then, "basically" what I want to do is:

1. Put all img objects between <div class="main-image"> and </div>;
2. Replace the img's class to attachment-single-post-image wp-post-image;
3. Replace the imgs height to 100;
4. Replace the imgs width to 300.

That's it :)

I don't know if my explanation is clear. Unfortunately I'm not a "native" English speaker.

Answer 1

var searchScope = $('div.entry');

var img = $("img", searchScope)
          .attr("height", 100)
          .attr("width", 300)
          .removeClass()
          .addClass("attachment-single-post-image wp-post-image")
          .wrap("<div class='main-image'></div>")