5

Eu tenho um modal que abre quando clico em um link, nesse modal eu vou digitar um email que, quando eu clicar em add email, vai adicionar o texto do email em um <ul> <li> abaixo do input.

Já fiz um código que seguir de um exemplo, já debuguei os dados e estão todos corretos; porém o e-mail ainda não é exibido na lista.

Meu Modal:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Enviar relatório por email</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">E-Mail:</label>
                        <input type="text" class="form-control" id="recipient-email">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Destinários</label>
                        <ul id="ListEmail"></ul>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="adicionarEmail">Add E-Mail</button>
                <button type="button" class="btn btn-primary salvarEnviar">Salvar</button>
            </div>
        </div>
    </div>
</div>

Meu javascript:

        document.getElementById("adicionarEmail").onclick = function () {
        var text = document.getElementById("recipient-email").value;
        var li = '<li>' + text + '</li>';

        document.getElementById("ListEmail").appendChild(li);
    }

3 Respostas 3

6

Está usando appendChild de forma errada. Antes é preciso criar o elemento com createElement:

var text = document.getElementById("recipient-email").value;
var li = document.createElement("li"); // cria a <li>
var t = document.createTextNode(text); // cria o nó de texto na <li>
li.appendChild(t); // adiciona o texto na <li>

document.getElementById("ListEmail").appendChild(li); // insere a <li> na div

Veja funcionando:

document.getElementById("adicionarEmail").onclick = function () {
   var text = document.getElementById("recipient-email").value;
   var li = document.createElement("li");
   var t = document.createTextNode(text);
   li.appendChild(t);
   
   document.getElementById("ListEmail").appendChild(li);
}
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Enviar relatório por email</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">E-Mail:</label>
                        <input type="text" class="form-control" id="recipient-email">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Destinários</label>
                        <ul id="ListEmail"></ul>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="adicionarEmail">Add E-Mail</button>
                <button type="button" class="btn btn-primary salvarEnviar">Salvar</button>
            </div>
        </div>
    </div>
</div>

2

A biblioteca jQuery fornece várias funções para inserir e obter o conteúdo de um elemento na página, de forma simples e rápida

append()

Esta função insere um conteúdo (recebido como parâmetro) no formato HTML ao final de um controle alvo.

O método .val() é usado principalmente para obter os valores de elementos de formulário como input, selecte textarea

Bastam duas linhas de código

 document.getElementById("adicionarEmail").onclick = function () {
    var text = $("#recipient-email").val();
    $("#ListEmail").append('<li>'+text+'</li>');

 }

Veja funcionando

        
     $('#exampleModal').modal('show');
        
        document.getElementById("adicionarEmail").onclick = function () {

        var text = $("#recipient-email").val();
        $("#ListEmail").append('<li>'+text+'</li>');
 
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Enviar relatório por email</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">E-Mail:</label>
                        <input type="text" class="form-control" id="recipient-email">
                    </div>
                    <div id="Email" class="form-group">
                        <label for="message-text" class="col-form-label">Destinários</label>
                        <ul id="ListEmail"></ul>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="adicionarEmail">Add E-Mail</button>
                <button type="button" class="btn btn-primary salvarEnviar">Salvar</button>
            </div>
        </div>
    </div>
</div>

1

Bem como a pergunta está marcada com jQuery, então vou dar uma resposta com este tópico:

//Adiciona um listener no onClick
$('#adicionarEmail').click( () => 
    //Pega o ListEmail adiciona um elemento
    $('#ListEmail').append( 
         //cria um elemento li e põe o texto como o valor do input
         $('<li>').text( $('#recipient-email').val() ) 
    )
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="recipient-email" />
<button id="adicionarEmail">Adicionar</button>
<ul id="ListEmail">

</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .