قرار دادن تگ img بین تگ span با استفاده از greasemonkey

[saeideros]

سلام
من می خوام با greasemonkey بعد از یه تگ img رو تگ span اضافه کنم و بعد هر دوی این ها رو (تگ img و تگ span تازه اضافه شده) رو دوباره داخل ی تگ span دیگه قرار بدم.

یعنی مثلا این کد:

<img src="1.jpg">
تبدیل بشه به این کد:


<span class="myclass">
<img src="1.jpg">
<span style="left: 20px; display: block;" class="myinclass" onclick="alert('OK')">
</span>
</span>

چطوری می تونم این کارو انجام بدم؟

راه حلی که ب ذهن خودم رسید این بود که کل تگ img رو با کل کدی که می خوام آخر سر ایجاد بشه replace کنم. واسه همین تو نت یه کمی گشتم. دو تا روش واسه replace کردن element پیدا کردم.

اولی این بود:




var elmNewContent = document.createElement('p');
elmNewContent.appendChild(document.createTextNode( 'Replaced!'));
var elmExtra = document.getElementsByTagName('img')[0];
elmExtra.parentNode.replaceChild(elmNewContent, elmExtra);



مشکل این راه اینه که چیزی که قراره جایگزین بشه کد HTMLه. ولی با این راه تبدیل ب متن میشه و از کار میوفته.

دومی هم این بود:



var elmExtra = document.getElementById('extra');
elmReplaced.innerHTML = '<p>Replaced!</p>';



اینم وقتی می خوام اجرا کنم میگه elmReplaced تعریف نشده.

[saeideros]

تقریبا راهشو پیدا کردم. میدونم خیلی درست نیست، ولی جواب میده.

var imgs = document.getElementsByTagName('img');

var elmNewContent = document.createElement('span');
elmNewContent.innerHTML = '<span class="myclass">' +
'<img src="1.jpg">' +
'<span style="left: 20px; display: block;" class="myinclass" onclick="alert('+"'"+'OK'+"'"+')">' +
'</span>'+
'</span>';
var elmExtra = document.getElementsByTagName('img')[0];
elmExtra.parentNode.replaceChild(elmNewContent, elmExtra);