Is there any way to take div and convert it to img tag using jquery?

Question

Let's suppose I have some element and also have some picture in folder. So what I want to do is to take exactly this div and covert it into img tag using picture that I have as a source.

Yes, there is. Now, where is your HTML & jQuery/JavaScript code attempt to solve this? Where are you stuck? — Shef, Jul 22 '11 at 14:34
possible duplicate of [jQuery: how to change tag name?](http://stackoverflow.com/questions/3435871/jquery-how-to-change-tag-name) — Diodeus - James MacFarlane, Jul 22 '11 at 14:35

James Allardice · Accepted Answer · 2011-07-22T14:41:05.357

$("#yourDiv").replaceWith("<img src='yourImage.png' />");

From the jQuery docs:

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.

So really, instead of "converting" the div as you ask in your question, this removes the div and replaces it with a new img element. Which should work exactly as you expected, but it's difficult to say for sure without a clearer question.

Here's an example fiddle to get you started.

score 1 · Answer 2 · answered Jul 22 '11 at 14:38

Yes you can :

$(function(){


$('div').each(function(){
   //TEST url used
    $img= $('<img>').attr('src','http://blog.irrashai.com/wp-content/uploads/2009/01/test-pilot.png');
    $(this).replaceWith($img);
});

});

Check my link : http://jsfiddle.net/R2XQp/

My example targets each DIV tag... changed code the way you want it.

score 0 · Answer 3 · answered Jul 22 '11 at 14:35

You can use the .replaceAll method.

Create a new image:

var $image = $('<img/>').attr('src', 'path/to/my/image.png');
$($image).replaceAll('#selector-of-div');

However, there might be better ways if you could clarify a bit more exactly why you are replacing a div with an img and what the usecase is :-)

score 0 · Answer 4 · answered Jul 22 '11 at 14:38

0

select the div and replace it with the img

$("#yourDIVid").replaceWith("<img/>",{src:'yourSource'});

jquery replaceWith

answered Jul 22 '11 at 14:38

Rafay

30,950
5
68
101

score 0 · Answer 5 · answered Jul 22 '11 at 14:46

0

//get it from somewhere
var imgSource;

$('#yourDiv').replaceWith('<img src=")

answered Jul 22 '11 at 14:46

Angad Singh

1
1

It looks like you just gave up halfway through writing your answer... obviously, this isn't going to work. – James Allardice Jul 22 '11 at 14:52

score -1 · Answer 6 · answered Jul 22 '11 at 14:37

-1

My approach would be

Take the div's innerHTML
Create your image tag and append it next to the div
Append the innerHTML of the div to the image tag
remove the div from the dom

If you try it and have problems, post your code here.

answered Jul 22 '11 at 14:37

JSager

1,420
9
18

Is there any way to take div and convert it to img tag using jquery?

6 Answers6