Menu
I need to convert a DOM element to a different type (as in HTML tag name, a to p in this case), but still retain all the original elements attributes. Whether they are valid for the new type or not doesn't matter in this case.
Any suggestions on how to do this?
I've looked at just creating a new element and copying the attributes across, but this isn't without it's own complications. In Firefox, DOMElement.attributes helpfully only includes attributes with a value, but in IE it reports all possible attributes for that element. The attributes property itself is read-only, so no way to copy that.
468
A need to convert a jQuery object to native DOM element may arise in your future project and the conversion is easy as calling get () method on the object likes so: The code above is equivalent to plain JavaScript document.getElementById ( "hello" )
There may be a situation when you would like to remove one or more DOM elements from the document. JQuery provides two methods to handle the situation. The empty ( ) method remove all child nodes from the set of matched elements where as the method remove ( expr ) method removes all matched elements from the DOM.
There are two approaches that can be taken to achieve this: Approach 1: Using inbuilt jQuery methods such as get (), reverse () and each (). Firstly, select all the required DOM elements using the get () method which returns a JavaScript array. Then, the native JavaScript method reverse () is used to reverse the array DOM elements.
JQuery provides two methods to handle the situation. The empty ( ) method remove all child nodes from the set of matched elements where as the method remove ( expr ) method removes all matched elements from the DOM.
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
while not a complete solution, the logic would basically be:
Save your existing element:
var oldElement = $(your selector here);
create a new element and insert it just before or after your oldElement
copy the attributes
oldElement.attr().each(function(){
copy old
});
better yet, here is an example of a plug-in that does just what you want:
http://plugins.jquery.com/project/getAttributes
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
