Hola, ¿hay alguna manera de hacer que el "YAY" adjunto sea de un estilo diferente del texto "Estoy feliz"? p.ej. tamaño de fuente más grande/en negrita.
document.getElementById("appendButton").onclick = function() { document.getElementById("happy").innerHTML += " YAY"; } <p id="happy">I am happy</p> <button id="appendButton">Click here to cheer!</button>Intenté darle una identificación con intervalo, pero luego el botón no agregará nada. Agradecería cualquier ayuda gracias!
No podrá usar una identificación porque las identificaciones deben ser únicas (lo que significa que no puede tener más de una en una página y esperar el resultado correcto).
Agregue una clase en su lugar.
Nota 1: aquí he usado el método más moderno addEventListener .
Nota 2: también vale la pena mencionar que la concatenación de cadenas HTML a innerHTML se considera una mala práctica . insertAdjacentHTML es la mejor alternativa.
const button = document.getElementById('appendButton'); const happy = document.getElementById('happy'); button.addEventListener('click', handleClick, false); function handleClick() { happy.innerHTML += '<span class="yay"> YAY</span>'; } .yay { color: blue; font-weight: 600; } <p id="happy">I am happy</p> <button id="appendButton">Click here to cheer!</button>Puede agregar un elemento span con una clase y luego diseñarlo con CSS:
document.getElementById("appendButton").onclick = function() { document.getElementById("happy").innerHTML += "<span class='large'>YAY</span>"; } .large{ font-size:20px; font-weight:bold; } <p id="happy">I am happy</p> <button id="appendButton">Click here to cheer!</button>