Append javascript

Navigation
3

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

I have already made a code that follows from an example, I have already debugged the data and they are all correct; but the email is not yet listed.

My 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);
    }
    
asked by anonymous 12.03.2018 / 19:39

3 answers

3

You are using appendChild wrongly. Before 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>
    
12.03.2018 / 19:55
2
  

The jQuery library provides several functions for simply inserting and retrieving the content of an element on the page

append ()

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

The .val () method is used primarily to get the values of form elements as input, select textarea

Just two lines of code 

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

 }

See it 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><linkrel="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><divclass="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>
    
12.03.2018 / 20:27
1

As well as the question is marked with jQuery, so I'll give you 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><inputid="recipient-email" />
<button id="adicionarEmail">Adicionar</button>
<ul id="ListEmail">

</ul>
    
12.03.2018 / 20:55
I would like to know what the function of: {} in the Python language is and more specifically within the PRINT function as in this code? Ignore punctuation in a sequence of numbers using Regex with Java