Problème CSS + JS

Bonjour,

J'utilise un innerHTML en JavaScript pour remplacer un bouton de formulaire en Javascript, jusqu'à la pas de problème. Mais maintenant je vais remplacer ce bouton classique par une image avec un hover au passe de la souris. Cela marche correctement sauf que quand on clique sur le bouton, le innerHTML ne fonctionne plus correctement et l'image reste (le texte ce met au dessus). Comment faire pour supprimer cette images ?

Voici le code que j'utilise :

JavaScript :

function envoyer() {
document.getElementById('1').innerHTML = 'Texte';
document.getElementById('2').submit();
}

CSS :

#envoyer {
background : url(./image1.png);
width : 135px;
height : 32px;
cursor : pointer;
display : block;
outline : none;
}
#envoyer:hover {
background : url(./image2.png);
width : 135px;
height : 32px;
}

HTML :

<form id="2" method="post" action="./go.php">
<div id="1">
<div id="envoyer" onclick="envoyer();"></div>
</div>
</form>

Voila, je vous remercie d'avance.