How can I turn a DIV into an input button?
This works great for a checkbox to turn it into a type text:
$('#mycheckbox').get(0).type = 'text';
But that doesn't work, nothing happens:
$('#mydiv').get(0).type = 'button'; //formatting
How can I turn a DIV into an input button?
This works great for a checkbox to turn it into a type text:
$('#mycheckbox').get(0).type = 'text';
But that doesn't work, nothing happens:
$('#mydiv').get(0).type = 'button'; //formatting
You can use replaceWith
for div.
$("#mydiv").replaceWith("<input type='button' value='MyButton'>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='mydiv'></div>
You cannot change div to button.
You can turn checkbox to text because you change <input type="checkbox">
to <input type="text">
. But There's no <div type="button">
in HTML.
you can't change a tagName, but you could change it to a submit
$('#mydiv').get(0).type = 'submit';
better
$('#mydiv').attr('type','submit'); // jQuery
this will loop through all buttons in the page and change it them into div's
var Btns = document.querySelectorAll('button');
Btns.forEach(changeNodeName)
function changeNodeName(el){
console.log(el)
var elNodeName = el.nodeName.toLowerCase();
var newString = el.outerHTML.trim()
.replace('<'+ elNodeName,'<div');
// To replace the end tag, we can't simply use replace()
// which means if our element has a child element with the
// same node name the end tag of the *child element* will be
// replaced, not the parent element. So,
newString = newString
.slice(0,newString.lastIndexOf('</div>'));
//now newString = "<div id='element'>Text" 'without closing tag'
newString = newString + "</div>";
el.outerHTML = newString;
// because, replace() will replace the first occurrence,
}