如何使用jQuery以編程方式插入一段代碼？

Question

我正在學習jQuery，我想用它來解決我遇到的一個老問題。我想用jQuery以編程方式添加一段HTML代碼。我需要做的是：創建一個jQuery函數來「解析」div中的所有元素/對象。當我的函數得到一個img對象時，我想把img放在另一個div內。

爲了使事情講清楚，讓我們假設我的函數解析這段代碼：

<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> 

我想寫一個jQuery函數，它更改爲：

<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> 

然後，「基本上」我想要做的是：

1. 將所有img對象置於<div class="main-image">和</div>之間;
2. 將img的類替換爲attachment-single-post-image wp-post-image;
3. 將img的高度替換爲100;
4. 將img的寬度替換爲300。

就是這樣:)

我不知道我的解釋是明確的。不幸的是，我不是一個「本地」的英語演講者。

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>")