How to convert html elements and properties to something else with jquery

Question

Nothing major, but I need to know if there is a way for me to change html elements with containing properties to something else with jquery.

What I actually want to do is to change the following piece of markup after a page load:

<div class="stretchMe" data-stretch="@Url.Content("Images/img1.jpg")"></div>

to

<img class="stretchMe" src="@Url.Content("Images/img1.jpg")" />

How to do something like this?

Can be easily modified to rename the attribute as well. Or alternatively: http://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another. — Felix Kling, Jul 11 '14 at 04:33

score 1 · Accepted Answer · answered Jul 11 '14 at 04:45

Try with .replaceWith()

html

<div class="stretchMe" data-stretch="@Url.Content(Images/img1.jpg)"></div>

JS

$("div.stretchMe").each(function () {

    var class1 = $(this).attr("class");

    var src = $(this).data("stretch");

    $(this).replaceWith("<img class=" + class1 + " src='" + src + "' />");
});

DEMO

OP

<img class="stretchMe" src="@Url.Content(Images/img1.jpg)">

How to convert html elements and properties to something else with jquery

1 Answers1

html

JS

DEMO

OP