Replace tag and keep attributes

Question

Possible Duplicate:
Change the tag name but keep all the attributes

Is it possible to replace an <a> tag with a <span> tag and keep all of it's attributes?

I have this HTML, and when someone clicks on Edit I want to convert all edit links to span's

<a href="javascript:void(0);" class="edit" data-id="123">Edit</a>

Once the user is done editing (by either pressing Save or Cancel) I then want to convert all the span tags back into links.

$(".edit").live("click", function(){
    $(".edit").addClass("inactive-link");
});

Easily? I do not think so. But why do you need that at all? Simplest here would be to change style of all edit links (so they look like inactive) and block event handlers execution. — Viktor S., Jan 14 '13 at 18:47
See http://stackoverflow.com/questions/6482847/change-the-tag-name-but-keep-all-the-attributes — Justin Bicknell, Jan 14 '13 at 18:55
Disable what? The click function? It's already disabled. You want to change the `cursor` so it appears as it's no longer a link on hover? — Ohgodwhy, Jan 14 '13 at 18:57
Sounds like an xy problem... so your actual question is how to disabled the user interaction on the link? — Felix Kling, Jan 14 '13 at 19:09
@RyanNaddy Choose the one which was most helpful? And write which answer were also used in comments or in question body. You can select only one answer. — Viktor S., Jan 14 '13 at 20:04

sp00m · Answer 1 · 2019-11-20T18:09:06.447

3

This should suit your needs:

function switchTag(e, toTag) {
    var outerHTML = e.outerHTML;
    outerHTML = outerHTML.replace(/^<([a-z])(.*?)>(.*?)<\/\1>$/ig, "<" + toTag + "$2>$3</" + toTag + ">");
    e.outerHTML = outerHTML;
};

Example of use:

$(".edit").click(function() {
    switchTag(this, "span");
});

Demo available ;)

edited Nov 20 '19 at 18:09

answered Jan 14 '13 at 18:58

sp00m

47,968
31
142
252

Thanks for using plain JS, this SHOULD be the correct answer – Ignacio Bustos Nov 20 '19 at 17:18

score 1 · Accepted Answer · answered Jan 14 '13 at 18:54

1

As FAngel indicates, style changes are much simpler in this case. I'm going to go ahead and use event delegation instead of .live in my example because .live will be removed in later jQuery versions:

$(document).on('click', '.edit', function (e) {
   //add inactive class to *this* link
   $(this).addClass('inactive-link');

   //stop default link behavior, i.e. opening a new page
   e.preventDefault();
});

answered Jan 14 '13 at 18:54

Explosion Pills

188,624
52
326
405

Will this disable all edit links? because that is what I want. – Get Off My Lawn Jan 14 '13 at 18:56
@RyanNaddy yes, every `.edit` link that is clicked will call `e.preventDefault()` – Explosion Pills Jan 14 '13 at 19:00
@ExplosionPills `e.preventDefault()` is useless in order to prevent onclick handler execution. While it is good as a replacement for `href="javascript:void(0);"`, it will not prevent execution of attached events. – Viktor S. Jan 14 '13 at 19:32
@FAngel I may have misunderstood .. if he wants to prevent other attached handlers from firing he should use `e.stopImmediatePropagation()` – Explosion Pills Jan 14 '13 at 19:33

Viktor S. · Answer 3 · 2013-01-14T19:02:40.383

$(".edit").live("click", function(e){
    if(!$(e.target).hasClass("inactive-link")) { //suppose $(this) will work instead of $(e.target), but do not remember for sure
         $(".edit").addClass("inactive-link");// after this is done - this function will not execute anymore for .edit elements because of previouse if statement
         //code to start editing
    }
});

Just check if clicked element has class inactive-link. And remove it after editing is done.

Basically, there is no "disable" feature for links. But you can unbind event handlers while in edit mode, or check if links has some class, like in my code above.

Also, please note that live is deprecated and you should better use .on (if you have some latest jQuery, v1.7 and higher). Here you can find how to replace live with on

Thanks, I used this as well, but I could only choose one. – Get Off My Lawn Jan 14 '13 at 20:41 — Get Off My Lawn, Jan 14 '13 at 20:41

score 0 · Answer 4 · answered Jan 14 '13 at 18:54

// Replacement Tag
var replacementTag = 'span';

$('a').each(function() {
    var outer = this.outerHTML;

    // Replace opening tag
    var regex = new RegExp('<' + this.tagName, 'i');
    var newTag = outer.replace(regex, '<' + replacementTag);

    // Replace closing tag
    regex = new RegExp('</' + this.tagName, 'i');
    newTag = newTag.replace(regex, '</' + replacementTag);

    $(this).replaceWith(newTag);
});

Link http://jsfiddle.net/tTAJM/19/

score 0 · Answer 5 · answered Jan 14 '13 at 19:03

I would use two containers : links and edit-links

When edit button is pressed, I would populate div edit-links with all the <a> tags from container links converted to <span>

When save button is pressed, I would re-create all the <a> tags in the links container.

$('#myButtonEdit').click(function(){        
    $('#links').hide();
    $('#edit-links').empty();

    //loop on all <a> tags to create <span> in edit-links div
    $('a').each(function(){
        $('#edit-links').append('<span id="'+this.id+'" class="'+$(this).attr('class')+'">'+$(this).attr('href')+'</span>');
    });
});

$('#myButtonSave').click(function(){

    $('#edit-links').hide();
    $('#links').empty();

    //loop on all <span> tags to create <a> in links container
    $('#edit-links span').each(function(){
        $('#links').append('<a id="'+this.id+'" class="'+$(this).attr('class')+'" href="'+$(this).html()+'">'+$(this).html()+'</span>');
    });
});

score 0 · Answer 6 · answered Jan 14 '13 at 19:10

Besides I don't like the way you want to solve your problem, here is one possible solution:

function replaceElement(el, tagName) {
  var attrs = {
    text: el.innerHTML
  };
  $.each(el.attributes, function() {
    attrs[this.nodeName] = this.nodeValue;
  });
  $(el).replaceWith($("<" + tagName + " />", attrs));
}

$("a.edit").on("click", function() {
  replaceElement(this, "span");
});

DEMO: http://jsfiddle.net/rxzdK/

Here new element will contain all attributes from the replaced element. However you should consider that <span> shouldn't have src attribute according to the standards.

Replace tag and keep attributes

6 Answers6

Related