Sample

要素のラッピングとアンラッピング

replaceWith()

$('#replaceWith').click(function(){
    $('#target ul li img').each(function(index, element) {
        $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>' );
    });
});

//または以下でも同じ（コールバックを使用）

$('#replaceWith').click(function(){
		$('#target ul li img').replaceWith(function() {
            return '<span>' + $(this).attr('alt') + '</span>';
        });
});

replaceWith()2

$('#replaceWith2').click(function(){
    $('#target ul li img').each(function(index, element) {
        $(this).replaceWith(function() {
            return $(this).parent('li').html().replace(/width="400"/, 'width="200"');
        });
    });
});

//または以下でも同じ（コールバックを使用）

$('#replaceWith2').click(function(){
    $('#target ul li img').replaceWith(function() {
        return $(this).parent('li').html().replace(/width="400"/, 'width="200"');
    });
});

replaceAll()

$('#replaceAll').click(function(){
	$('<p>Photo</p>').replaceAll('#target ul li img');
});

リセット

replaceWith()

replaceWith()2

replaceAll()

<div id="target">
  <ul>
    <li><img src="images/1.jpg" width="400" alt="夕日"></li>
    <li><img src="images/2.jpg" width="400" alt="子供の海がめ"></li>
    <li><img src="images/3.jpg" width="400" alt="海岸の子供"></li>
  </ul>
</div>