Replace img with div jQuery

Question

I'm looking to replace an image with a class to a div with text inside it, how can I do that?

<script>
$('img.vCSS_img_history_off').replaceWith('<div id="button">Turn History Off</div>');
</script>

I know that code is screwed up, but it's just to paint a picture of what I'm looking for, any suggestions?

Don't forget to wrap this in `jQuery(document).ready(function(){ /* here*/ });` — Pierre, Dec 11 '11 at 23:04
@Pierre Wait, you mean this? `$(function () { /* here */ });` — Šime Vidas, Dec 11 '11 at 23:06
@ŠimeVidas Yep, but the "longer" version is easier for newbies to understand. — Pierre, Dec 11 '11 at 23:08
@Pierre Using the longer form just because it's easier to understand is a recipe for a lousy programmer. Have more faith in beginners. I'm sure they can figure out the shorter form without trouble. — Šime Vidas, Dec 11 '11 at 23:12
Holy cow you're right, all I had to do was call it on the page load! I wrote this myself :) — henryaaron, Dec 11 '11 at 23:17

phemios · Answer 1 · 2011-12-11T23:18:55.153

0

An alternative could be to use this but it will erase other parent's child (as @Vide Simas said):

$(".myImage").parent().html('<div>hello</div>');

What you wrote looks like good, i've written a jsfiddle using replaceWidth: http://jsfiddle.net/ydZg5/

The error must be somewhere else

edited Dec 11 '11 at 23:18

answered Dec 11 '11 at 23:05

phemios

1

Images are empty elements, you cannot put a DIV inside an image. – Šime Vidas Dec 11 '11 at 23:07
2

That only works for images that are only childs (since all children of the parent are removed). – Šime Vidas Dec 11 '11 at 23:13

score 0 · Answer 2 · answered Dec 11 '11 at 23:20

0

The code below will replace an image with class name "myImageClassName" with a div containing the text "This is my div text":

$('img.myImageClassName').replaceWith('<div>This is my div text</div>');

but yeah, I gotta agree with the others.. your code looks fine.

answered Dec 11 '11 at 23:20

dan

Re-writing the question is not considered as an answer. Anyway, the solution was wrote down in the question comments 5min ago. – Pierre Dec 11 '11 at 23:22

Purag · Accepted Answer · 2011-12-11T23:27:57.653

You need to make sure the DOM is ready before you go searching for elements in it:

$(document).ready(function(){
    $('img.vCSS_img_history_off').replaceWith('<div id="button">Turn History Off</div>');
});

Alternatively, you can add whatever you need to after the image and then remove it:

$(document).ready(function(){
    $("img").after("<div>Inserted div</div>").remove();
});

More on .after() here and more on .remove() here.

3 Answers3