How to Change an Element Type Using Jquery

how to change an element type using jquery

Here's one way you could do it with jQuery:

var attrs = { };

$.each($("b")[0].attributes, function(idx, attr) {
    attrs[attr.nodeName] = attr.nodeValue;
});

$("b").replaceWith(function () {
    return $("<h1 />", attrs).append($(this).contents());
});

Example: http://jsfiddle.net/yapHk/

Update, here's a plugin:

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    };
})(jQuery);

Example: http://jsfiddle.net/mmNNJ/

Changing an element type using jquery

How about, instead of:

$("#file01b").replaceWith(function () {

You use:

$("#"+e.target.id).replaceWith(function () {

Check your fiddle, updated.

Note: If the above is fine, then $(e.target).replaceWith(function () { will work as well.

change type of input field with jQuery

It's very likely this action is prevented as part of the browser's security model.

Edit: indeed, testing right now in Safari, I get the error type property cannot be changed.

Edit 2: that seems to be an error straight out of jQuery. Using the following straight DOM code works just fine:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

Edit 3: Straight from the jQuery source, this seems to be related to IE (and could either be a bug or part of their security model, but jQuery isn't specific):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

Change element type, preserving jQuery event handlers

I found another question that seems to answer what you're trying to do

Duplicate one element's event handlers onto another?

They do the following

$.each($._data($('#original').get(0), 'events'), function() {
  // iterate registered handler of original
  $.each(this, function() {
    $('#target').bind(this.type, this.handler);
  });
});

Accessing the $._data of the original element $('#original') allows you to gain access to the events it has attached, so iterating over each one allows you to attach the same events to a new element, in this case $('#target')

Use jQuery to change an HTML tag?

Once a dom element is created, the tag is immutable, I believe. You'd have to do something like this:

$(this).replaceWith($('<h5>' + this.innerHTML + '</h5>'));

Change the type of element using jQuery

You can use the replaceWith method to do this. You'll need to rebuild the attributes for the replacement though.

$('#p').replaceWith(function(){
   return '<span>' + $(this).contents().text() + '</span>';
});

Working example

jQuery convert DOM element to different type

Sans-jQuery solution:

function makeNewElementFromElement( tag, elem ) {

    var newElem = document.createElement(tag),
        i, prop,
        attr = elem.attributes,
        attrLen = attr.length;

    // Copy children 
    elem = elem.cloneNode(true);
    while (elem.firstChild) {
        newElem.appendChild(elem.firstChild);
    }

    // Copy DOM properties
    for (i in elem) {
        try {
            prop = elem[i];
            if (prop && i !== 'outerHTML' && (typeof prop === 'string' || typeof prop === 'number')) {
                newElem[i] = elem[i];
            }
        } catch(e) { /* some props throw getter errors */ }
    }

    // Copy attributes
    for (i = 0; i < attrLen; i++) {
        newElem.setAttribute(attr[i].nodeName, attr[i].nodeValue);
    }

    // Copy inline CSS
    newElem.style.cssText = elem.style.cssText;

    return newElem;
}

E.g.

makeNewElementFromElement('a', someDivElement); // Create anchor from div

---

Related Topics