xl-t said on 9/12/07

Wed, 12 Sep 2007 07:18:35 GMT

In order to keep all attributes you might want to try this one:

jQuery.fn.replaceWith = function(replacement) 
{
    return this.each (function() 
    {
        element = $(this);
        $(this).after(replacement).next().html(element.html());
        for (var i = 0; i < this.attributes.length; i++) {
            element.next().attr(this.attributes[i].nodeName, this.attributes[i].nodeValue);
        }
        element.remove();
    })
}

jkline said on 7/20/07

Fri, 20 Jul 2007 17:43:53 GMT

I tried that and it barfed if the element I was trying to replace did not have any class. The error was $(this).after(replacement).next().attr("class", element.attr("class")) has no properties at jquery.replacewith.js Line 13

First I tried just doing this .attr('class', element.attr('class')).attr('id',element.attr('id'))

But I don't want an empty class or id attribute ending up in the result.

So I did this instead:

jQuery.fn.replaceWith = function(replacement) {
  return this.each(function(){
    element = $(this);
    $(this)
      .after(replacement).next()
      .html(element.html());

   if (element.attr('class')) {
    element.next().attr('class', element.attr('class'));
   }

   if (element.attr('id')) {
    element.next().attr('id',element.attr('id'));
   }

   element.remove();
  });
};

Not as elegant and jQueryish, but more functional.

Thanks!

Comments on snippet: 'JQuery plugin: Replace DOM element and keep classes and id'

xl-t said on 9/12/07

jkline said on 7/20/07