1
votes

Comment changer div en bouton?

Comment puis-je transformer un DIV en bouton de saisie?

Cela fonctionne très bien pour une case à cocher pour le transformer en texte de type:

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

Mais cela ne fonctionne pas t travail, rien ne se passe:

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

javascript jquery html

0 commentaires

4 Réponses :

0
votes

Vous ne pouvez pas changer div en bouton.

Vous pouvez transformer la case à cocher en texte car vous remplacez par . Mais il n'y a pas de

en HTML.

0 commentaires

1
votes

Vous pouvez utiliser replaceWith pour div.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='mydiv'></div>

$("#mydiv").replaceWith("<input type='button' value='MyButton'>");

3 commentaires

Merci, cela fonctionne très bien! Maintenant, j'ai juste besoin de comprendre comment attacher un gestionnaire d'événements onclick à ce bouton

Voyez cette question ancienne et épique sur le fonctionnement des dom ajoutés dynamiques. stackoverflow.com/questions/203198/… < / a>

Merci, tout fonctionne bien comme ceci: $ ("# nuBreadcrumb0"). ReplaceWith ("") $ ("# nuBreadcrumb0"). Click (function () {alert ('clic!');});

0
votes

vous ne pouvez pas changer un tagName, mais vous pouvez le changer en un envoi

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

mieux

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

2 commentaires

Merci pour votre suggestion! Cependant, ce code ne montre aucun effet.

sur une balise d'entrée?

0
votes

cela va parcourir tous les boutons de la page et les changer en 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,
    }

0 commentaires