Append javascript

Question

I have a modal that opens when I click on a link, in this modal I will type an email that when I click on add email, will add the email text in a <ul> <li> below the input.

I already made a code to follow an example, I debugged the data and they are all correct; however the email is not yet displayed in the list.

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>

My javascript:

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

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

Answer 1

Are you using appendChild wrong way. First you need to create the element with 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

See working:

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>

Answer 2

The jQuery library provides various functions to insert and obtain the contents of an element on the page, simply and quickly

append()

This function inserts a content (received as parameter) into the HTML format at the end of a target control.

The method .val() is mainly used to obtain the values of form elements like input, selecte textarea

Just two lines of code

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

 }

See working

        
     $('#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>

Answer 3

As well as the question is marked with jQuery, so I will give an answer with this topic:

//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>