Question

Currently I have an image like this (created by CKEditor):

<img src="foo.jpg" style="float: left; margin-left: 20px;" alt="Image text">

I want to add a div around this image and extract the text from the alt-tag into a span.

$(document).ready(function () {
    $("#foo img").each(function() {
        $(this).wrap("<div class='imgtxt' />");
        $(this).after($("<span />").text($(this).attr("alt")));
     });
});

So far so god! But I also want to get the style attributes from the img and add that to the CSS of the newly created div. How can I achieve this?

Answer 1

Try this

$(document).ready(function () {
    $("#foo img").each(function() {
        $(this).wrap("<div class='imgtxt' />");
        $('.imgtxt').attr('style', $(this).attr('style'));
        $(this).after($("<span />").text($(this).attr("alt")));
     });
});