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?

ezhil
  • 977
  • 6
  • 15
  • 36
  • This wont work, `
    ` tags dont have a `src` property. What you can do is set the background image for the `
    `to whatever the source is for the ``
     – Master Yoda Mar 01 '18 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. – Balbinator Mar 01 '18 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. – Simon Hyll Mar 01 '18 at 14:22
  • @SimonHyll Is it [actually supported](https://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-DIV) without adding additional logic though? – Master Yoda Mar 01 '18 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. – Simon Hyll Mar 01 '18 at 15:27
  • The only tags that matter are html, head and body because they make a difference in the browser, but other than that all premade tagsare judt like any tags you can create yourself. – Simon Hyll Mar 01 '18 at 15:29

1 Answers1

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?

Christoph
  • 184
  • 8
  • it is copying all attr and assigning to div tag. Can this be done without div tag? Just replace img with div? – ezhil Mar 01 '18 at 14:01