1

I am trying to Convert only img tag wit div tag by using jQuery

<img class="wrap" src="xyz.com" alt="test" /> <div class="test"></div>

with 

<div class="wrap" src="xyz.com" alt="test" />

Trying like this 

var $select = $(".wrap"); var $div = $(".test"); var attributes = $select.prop("attributes"); $.each(attributes, function() { $div.attr(this.name, this.value); });

Above code is copying all attribute from img and assigning to div tag. I want to achieve the same without assigning to html. Simply i want replace img tag with div tag. Is that possible?

Improve this question
6
  • This wont work, <div> tags dont have a src property. What you can do is set the background image for the <div>to whatever the source is for the <img> Commented Mar 1, 2018 at 13:38
  • Why are you trying to do this? If is for the purpose of the document itself it would be better to just replace with some text editor. If you need to do this on the go in your code the "replace" of a non active document would work as well. Commented Mar 1, 2018 at 13:39
  • @Master Yoda incorrect, all html tags can have any tag you want, they just dont necessarily do anything on the wrong element. You can have src on a div and add some css to use that value as the source for the background-image property. It wont to all of it for you but any tag can do anything with any property of you set it up right. E.g. a button tag is just a tag like any other but the browser has built in stylesheets and functions for it, you can set up your own button tag that is identical to the standard one if you want to. Commented Mar 1, 2018 at 14:22
  • @SimonHyll Is it actually supported without adding additional logic though? Commented Mar 1, 2018 at 14:41
  • @Master Yoda well it depends a bit on how you mean supported. With just like 3 lines of CSS you can make it so that a src tag on divs are used for setting the background image of the div, essentially turning all divs into img tags. So it is supported to set whatever property you want on any tag you want, you just need to add functionality to the property. But as i said, that's exactly what the browser does for you on premade tags and properties, but you can create your own ones as you see fit. This is also why things look different in different browsers, they have their own stylesheets. Commented Mar 1, 2018 at 15:27

1 Answer 1

Reset to default
1

Try this:

var $img = $("img.wrap"); var $div = $("div"); var attributes = $img.prop("attributes"); // loop through <img> attributes and apply them on <div> $.each(attributes, function() { $div.attr(this.name, this.value); }); $img.remove(); $("#someContainer").append($div);

HTML:

<div id="someContainer"> <img class="wrap" ... /> </div>

Source: jQuery: How to copy all the attributes of one element and apply them to another?

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

it is copying all attr and assigning to div tag. Can this be done without div tag? Just replace img with div?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.