1

Estoy tratando de realizar un cuadro de comentarios. Dentro del texto aplico saltos de líneas entre las letras ABCD. Quiero que me devuelva las letras tal como de seria comentar, ejemplo: Si público:

  • A
  • B
  • C
  • D

que me devuelva

  • A
  • B
  • C
  • D en saltos de línea.

Pero como verán en la imagen de la página me devuelve todo en una misma línea, no sé qué estoy haciendo mal. Alguno me ayuda?

function nComentario(){
    let li = document.createElement("li");

    
     var valorIngresado = document.getElementById("nuevoComentario").value; 
     valorIngresado = valorIngresado.replace(/\n|\r/g, "<br>");
     
    let text = document.createTextNode(valorIngresado);
    
    li.appendChild(text);

     if (valorIngresado === ''){

        alert("Ingrese un comentario!")

    }else{
        document.getElementById("comentarios").appendChild(li)
        
    }
<div class="input-com">
                <form action=""><textarea name="nuevoComentario" id="nuevoComentario" 
                    rows="5" cols="5"
                    placeholder="Nuevo mensaje..." > Nuevo mensaje...</textarea></form>

1 respuesta 1

1

Tu problema es que estas usando createTextNode, lo que específicamente crea un nuevo nodo como texto, entonces esos <br > aparecen escritos en vez de ser renderizados.

Puedes usar innerHTML en su lugar

li.innerHTML= valorIngresado;

function nComentario(){
    let li = document.createElement("li");

    
     var valorIngresado = document.getElementById("nuevoComentario").value; 
     valorIngresado = valorIngresado.replace(/\n|\r/g, "<br>");
     li.innerHTML= valorIngresado;

     if (valorIngresado === ''){

        alert("Ingrese un comentario!")

    }else{
        document.getElementById("comentarios").appendChild(li)
        
    }
 }
<textarea name="nuevoComentario" id="nuevoComentario" 
 rows="5" cols="5"  placeholder="Nuevo mensaje..." ></textarea>
 
<button onclick="nComentario()">Guardar</button>

<ul id="comentarios"></ul>

5
  • Muchas graciassss maestroooo!!! estuve 20 hs tratando de solucionarlo!
    – Agustin
    Commented el 16 feb. 2023 a las 6:20
  • Me podrias explicar brevemente con tus palabras porque no se usa createTextNode?
    – Agustin
    Commented el 16 feb. 2023 a las 6:22
  • Un documento HTML es un árbol, los árboles en programación tienen Nodos, donde cada nodo es de algún tipo, el más común es element que representa una etiqueta HTML, otro de ellos es el tipo texto, donde es un texto simple. createTextNode crea específicamente un nodo del tipo texto.
    – Yussef
    Commented el 16 feb. 2023 a las 6:32
  • Porque piensa en el siguiente problema, imagina que yo quiero que me aparezca escrito en la pantalla esto <span>HOLA</span> (incluidas las etiquetas), como puede decirle al navegador que no quiero que renderice los <span> si no que quiere que los muestre como texto....bueno una alternativa es usando createTextNode, por eso a ti se te mostraban los <br>, en cambio con innerHTML, estamos diciendo que dentro va ir código HTML
    – Yussef
    Commented el 16 feb. 2023 a las 6:33
  • Ya entendi! muchas gracias!
    – Agustin
    Commented el 16 feb. 2023 a las 6:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.