echo is printing the HTML tags

Question

I made a script for subscription newsletter, the user sends the email to register.php and from there the script receives an echo in a message with button, the problem is that the button does not appear, what appears is the tag, see:

Script:

$(function()
{
    $("#ok").click(function()
    {
        $("#formulario_news").hide("slow");
        BeforeSend:$("#carregando_news").show("slow");
        var email = $("#email").val();
        $.post("<?php bloginfo('template_directory');?>/newsletter/cadastro.php",{email: email}, function(data)
        {
            complete:$("#carregando_news").hide("slow");
            $("#retorno").show("slow").text(data);
            $("#voltar").click(function()
            {
                $("#retorno").hide("slow");
                $("#formulario_news").show("slow");
            });
        });
    });
});
<div id="newsletter">

        <h1>/Assine nosso newsletter</h1>

        <div id="formulario_news">
            <span>Informe seu email:</span>
            <input type="text" id="email" name="email"/>
            <input type="submit" name="ok" id="ok" class="btn_ok" value="OK"/>
        </div>

        <div id="carregando_news" style="display:none;">
            <img src="<?php bloginfo('template_directory'); ?>/imagens/ajax-loader.gif"/> <p> Aguarde, enviando...</p>
        </div> <!-- Carregando newsletter -->

        <div id="retorno" style="padding:10px;border:1px solid #0F0;background:#C1FFD1;width:170px;margin-left:3px;margin-bottom:3px;display:none;font:14px Trebuchet;
            font-weight:bold;">
        </div>

</div>

php.:

$email = strip_tags(trim($_POST['email']));
if(empty($email))
{
    echo "Informe seu email</br>";
    echo "<button type="button" id="voltar"/>Voltar</button>";
}
elseif(!filter_var($email, FILTER_VALIDATE_EMAIL))
{
    echo "Informe um email válido</br>";
    echo "<button type="button" id="voltar"/>Voltar</button>";
}

Let’s assume that the user does not enter the email and click the OK button. The return is this:

Informe seu email</br>
<button type="button" id="voltar"/>Voltar</button>

Tags appear written, browser does not skip line and button does not appear.

Answer 1

The problem is here:

$("#retorno").show("slow").text(data);
                            ↑

When using the method .text(), tags are treated as text. Use the method .html():

$("#retorno").show("slow").html(data);
                            ↑

The method .html() will insert the value of data as HTML instead of text.

As previously commented, there is a break in the echo:

echo "<button type="button" id="voltar"/>Voltar</button>";

You are delimiting the string with double quotes and using the same quotes inside the string. Swap the double quotes inside the string by single quotes:

echo "<button type='button' id='voltar'>Voltar</button>";
                   ↑      ↑    ↑      ↑

The tag button does not require a closure of the shape you have put:

echo "<button type='button' id='voltar'/>Voltar</button>";
                                       ↑
                                    errado!

The tag is closed on </button>.

Answer 2

The problem is in your echo you are using double quotes to declare the content of echo and as in your tag html there are double quotes you should use single quotes as in the example below or concatenate with a counter bar where you need to use double quotes.

$email = strip_tags(trim($_POST['email']));
if(empty($email))
{
    echo 'Informe seu email</br>';
    echo '<button type="button" id="voltar"/>Voltar</button>';
}
elseif(!filter_var($email, FILTER_VALIDATE_EMAIL))
{
    echo 'Informe um email válido</br>';
    echo '<button type="button" id="voltar"/>Voltar</button>';
}