Este post irá discutir como alterar o texto de um button em JavaScript e jQuery.
o button elemento agora é a maneira preferida de criar botões sobre <input> elemento do botão de tipo. Existem várias maneiras de alterar o button's label text, que é inserido entre suas tags de abertura e fechamento.
1. Usando jQuery
Com jQuery, você pode usar o .text() método para substituir o buttono texto da etiqueta. Isso é demonstrado abaixo:
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $(this).text('Processing…'); }) }); |
HTML
|
1 2 3 4 5 6 |
<!doctype html> <html lang="en"> <body> <button id="submit">Submit</button> </body> </html> |
Observe que o .text() O método escapará do texto fornecido conforme necessário para renderizar corretamente em HTML.
Alternativamente, você pode usar o jQuery .html() método para substituir completamente o conteúdo de um elemento pelo novo conteúdo. Ele usa o navegador innerHTML propriedade e não escapa do texto fornecido, levando a ataques de segurança entre sites.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $(this).html('Processing…'); }) }); |
HTML
|
1 2 3 4 5 6 |
<!doctype html> <html lang="en"> <body> <button id="submit">Submit</button> </body> </html> |
2. Usando JavaScript
Em JavaScript puro, você pode usar innerHTML, innerText ou textContent para escrever texto dentro de um elemento. Entre eles, textContent tem melhor desempenho porque seu valor não é analisado como HTML e também evita ataques XSS.
JS
|
1 2 3 |
document.getElementById('submit').onclick = function() { this.textContent = 'Processing…'; } |
HTML
|
1 2 3 4 5 6 |
<!doctype html> <html lang="en"> <body> <button id="submit">Submit</button> </body> </html> |
Isso é tudo sobre como alterar o texto de um botão em JavaScript e jQuery.