Question

如何将DIV变成输入按钮？

这对于将复选框转换为文字文本非常有用：

$('#mycheckbox').get(0).type = 'text';

但是，这并不工作，什么都不会发生：

$('#mydiv').get(0).type = 'button'; //formatting

Answer 1

可以使用replaceWith是用于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>

Answer 2

您不能将div更改为按钮。

因为您将<input type="checkbox">更改为<input type="text">，所以可以将复选框转换为文本。但是HTML中没有<div type="button">。

Answer 3

你不能改变标记名，但你可以将其更改为一个提交

$('#mydiv').get(0).type = 'submit';

更好

$('#mydiv').attr('type','submit'); // jQuery

Answer 4

这将遍历页面中的所有按钮并将其更改为 div 的

    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,
    }

如何将div更改为按钮？

4 个答案: