Tengo una cadena en la que me gustaría inyectar una etiqueta <br> basada en valores de matriz.
Mi código html:
'Hello people. `<span>`Hello to everyone`</span>`'; <script> let array = ['Hello', 'to everyone']; </script> Necesito inyectar la etiqueta <br> entre 'Hola' y 'a todos' dentro de <span> según el contenido de la matriz. ¿Cómo puedo hacerlo sin reemplazar las etiquetas y sin afectar la primera palabra 'Hola'?
Rendimiento esperado:
'Hello people. `<span>`Hello `<br>` to everyone`</span>`'Debe hacer esto borrando el contenido del elemento <span> , luego iterar sobre la matriz con un método foreach donde agrega el contenido de la matriz y luego un salto de línea ( <br> ). Puede definir el salto de línea con const lineBreak = document.createElement('br'); , luego puede agregarlo al elemento span con alguna manipulación DOM como esta elem.appendChild(lineBreak)
Aquí está el código completo:
<head> <title>hello world</title> </head> <body> <p>Hello people. <span id='message' style="WHITE-SPACE: br">Hello to everyone</span></p> <script> function split_words(){ let array = ['Hello', 'to everyone']; const elem = document.getElementById('message'); let result = ''; const lineBreak = document.createElement('br'); elem.innerHTML = ''; array.forEach(word => { elem.innerHTML += word; elem.appendChild(lineBreak) }); } window.onload = split_words(); </script> </body>Podría usar \n o <br/> dentro del texto. Tu código se verá así
document.write(`Hello people. <span>Hello <br> to everyone</span>`);