tengo un botón "Pausa" con un ícono de materializar pause_circle_outline, y cuando se hace clic, quiero cambiar el texto a "Reanudar" y cambiar el ícono a play_circle_outline, pero cuando intento cambiar el texto, cambia el texto y elimina el ícono . aquí está mi ejemplo de fragmento de código:
jQuery(document).ready(function($){ $(document.getElementById("pause_btn")).click(function(){ document.getElementById("pause_btn").innerText = "Resume" }); }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src = "Sources/js/select_require.js"></script> <script src = "Sources/js/routes.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <body> <a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a> </body> </html>Tanto textContent como innerText eliminan los nodos secundarios cuando se modifican
¿Quizás coloque su texto dentro de un span con una ID y cambie su textContent ?
de esa manera, su etiqueta i debería permanecer intacta.
.innerText es una forma "segura"* de acceder al HTML interno de un innerHTML , que en su caso incluye tanto el texto de Pause como la etiqueta <i.../> .
Una forma de resolver esto es agregar un span para contener el texto. span s no hace nada (ya que son elementos en línea y están formateados o mostrados de manera predeterminada como un elemento de texto simple), ¡pero ayudan al hacer que el nodo de texto sea seleccionable por document.querySelector !
Ejemplo:
var playing = true window.addEventListener("load", () => { document.querySelector("#pause_btn").addEventListener("click", () => { playing = !playing if(playing) { document.querySelector("#pause_btn span").innerText = "Pause" document.querySelector("#pause_btn i").innerText = "pause_circle_outline" } else { document.querySelector("#pause_btn span").innerText = "Resume" document.querySelector("#pause_btn i").innerText = "play_circle_outline" } }); }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <body> <a class="waves-effect waves-light btn" id="pause_btn"> <span>Pause</span> <i class="material-icons right">pause_circle_outline</i> </a> </body> </html>¡También agregué un código adicional para que se pueda hacer clic varias veces!
*: Por seguro, en este contexto, me refiero a que está a salvo de un problema de seguridad llamado XSS . En general, es mejor usar innerText cuando no necesita cambiar explícitamente el HTML en sí, pero si lo hace: asegúrese de que NO haya forma de que un usuario pueda ingresar algo que se coloque en innerHTML . Lo que inicialmente quise decir fue simplemente que escribir en innerHTML e innerText siempre sobrescribirá cualquier contenido que tenga el elemento, y que innerText es generalmente el más seguro de los dos.
¿Ha intentado poner el ícono junto con el texto en el HTML interno?
jQuery(document).ready(function($){ $(document.getElementById("pause_btn")).click(function(){ document.getElementById("pause_btn").innerHTML = 'Resume<i class="material-icons right">pause_circle_outline</i>' }); }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src = "Sources/js/select_require.js"></script> <script src = "Sources/js/routes.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <body> <a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a> </body> </html>