Change node type
No, you can't actually change it, but you can replace them with a new element using the replaceWith()
method:
$("a").replaceWith("<input>");
If there are any attributes that you want to keep, you'll need to manually set them:
$("a").replaceWith(function() {
return $("<input>", {
class: this.className,
value: this.innerHTML
});
});
Changing an A element to an INPUT element isn't changing the type, it is changing the tagName. According to the DOM 2 Core specification, an element's tagName is readonly, so no, you can't set it.
However, you can replace an element with a different element, provided it is valid in the DOM.
Using standard JavaScript's ChildNode.replaceWith() method can do this. Run example.
var element = document.querySelector("span");
var elementInnerHTML = element.innerHTML;
var newElement = document.createElement("h1");
newElement.innerHTML = elementInnerHTML;
element.replaceWith(newElement);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>hightekk.com</title>
</head>
<body>
<span>
Hello World
</span>
</body>
</html>