Insert line break in an AJAX response

Question

I’m developing a system for teaching purposes, but I can’t do a simple line break.

The System is basically a filling of some inputs, where when clicking a button it reads these fields and assembles a message, which I display on the same page through ajax.

HTML

<div class="alert alert-success text-center invisible"></div>

AJAX

let formulario = document.forms.formulario;
formulario.addEventListener('submit', function(event){

event.preventDefault();

var dados = {};
dados.nome = formulario.nome.value;
dados.tel = formulario.tel.value;
dados.pet = formulario.pet.value;
dados.medico = formulario.medico.value;

var dadosTexto = JSON.stringify(dados);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'modalCadastroCliente');
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function(){
    var mensagem = document.querySelector("div.alert");
    mensagem.classList.remove("invisible");
    mensagem.textContent = xhr.responseText;
    
}

xhr.send(dadosTexto);
});

PHP

<?php
include_once('conexao.php');

header("Access-Control-Allow-Origin: *");
header('Cache-Control: no-cache, must-revalidate'); 
header("Content-Type: text/plain; charset=UTF-8");
header("HTTP/1.1 200 OK");

$json = file_get_contents("php://input");
$obj = json_decode($json);

/* {"nome":"Erick","tel":"37999750686","pet":"Bento","medico":"Lara"} */
$nome = $obj->{'nome'};
$tel = $obj->{'tel'};
$pet = $obj->{'pet'};
$medico = $obj->{'medico'};


$nomeCript =  base64_encode($nome);

$url = 'localhost/pesquisa-satisfacao?' . 'id=' . $nomeCript;

$msg = "<p>Olá " . $nome . ", somos do Hospital Veterinário Santa Clara.
Agradecemos a confiança de nos deixar cuidar e atender o(a) " . $pet . " 
Ficaremos muito feliz se puder nos ajudar respondendo algumas perguntas, 
prometo que não gastara mais de 1 minuto! So acessar o link a baixo:</p>" . " 
<p>" . $url . "</p>";

$sql = "INSERT INTO clientes (nome, pet, medico, tel, urls, created) VALUES
('$nome', '$pet', '$medico', '$tel', '$url', NOW())";
$sql = $pdo->query($sql);


if($nome AND $tel AND $pet AND $medico != '' ){
    echo $msg;
}else{
    echo "Algo de errado não esta certo...";
}

I wanted to separate the URL from msg, like force a line break so it is not giving this way that I did the browser does not interpret the tags because it seems that everything got inside a string

Does anyone have any suggestions on how I can improve the formatting of this message?

Answer 1

Good morning, I believe \n can help or even a <br>, If you want something with greater control, you can try using the split with javascript

Answer 2

I managed to resolve by changing this part

xhr.onload = function(){
    var mensagem = document.querySelector("div.alert");
    mensagem.classList.remove("invisible");
    mensagem.textContent = xhr.responseText;
    
} 

The textContent works by printing a raw string when changing to innerHTML worked thus

xhr.onload = function(){
    var mensagem = document.querySelector("div.alert");
    mensagem.classList.remove("invisible");
    mensagem.innerHTML = xhr.responseText;
}