Send textarea text to div

Question

Good community, I have the following script that takes text from the textarea and places it inside a div after ENTER.

$(document).ready(function(){


$('textarea').keypress(
function(e){
    if (e.keyCode == 13) {
        var msg = $(this).val();
        $(this).val('');
        if(msg!='')

        $('<div class="msg_b">'+msg+'</div>').insertBefore('.msg_push');
        $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
    }
});

If the div "msg_b" is written in HTML in the body the script works, but in this case I specify I need the div "msg_b" to be a js element and this way I can’t get ENTER to send the text entered in the textarea to the div.

  var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ username +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"><div class="msg_body"><div class="msg_a">This is from A   </div><div class="msg_b">This is from B</div><div class="msg_push"></div></div></div><div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div></div>';








            document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;  

If these div’s come out of this element and stay in the HTML itself The textarea text message already goes into the div "msg_b".

<div class="msg_box" style="right:290px">
<div class="msg_head">User
<div class="close">x</div>
</div>
<div class="msg_wrap">
    <div class="msg_body">
        <div class="msg_a">This is from A   </div>
        <div class="msg_b">This is from B, and its amazingly kool nah... i know it even i liked it :)</div>

        <div class="msg_push"></div>
    </div>
<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>

Answer 1

See if that solves your problem:

var username = "João"; //exemplo
var id = "_qrt4"; //exemplo
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ username +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"><div class="msg_body"><div class="msg_a">This is from A   </div><div class="msg_b">This is from B</div><div class="msg_push"></div></div></div><div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div></div>'

$('body').append(element) //Adiciona o elemento como um child

$('textarea').keypress(
function(e){
    if (e.keyCode == 13) {
        var msg = $(this).val();
        if(msg!=''){// Como mais de uma linha no if, os colchetes são necessários
            $('<div class="msg_b">'+msg+'</div>').insertBefore('.msg_push');
            $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
        }
        $(this).val(''); //O esvaziamento deve ocorrer ao final de tudo
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Here the method append(). Basically it works like this:

 elementoPai.append('aqui virá um novo filho ao elemento pai');

It could be written in the same way as your example:

var username = "João";
var id = "_qrt4";
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ username +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"><div class="msg_body"><div class="msg_a">This is from A   </div><div class="msg_b">This is from B</div><div class="msg_push"></div></div></div><div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div></div>';

document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;  


$('textarea').keypress(
function(e){
    if (e.keyCode == 13) {
        var msg = $(this).val();
        if(msg!=''){
        $('<div class="msg_b">'+msg+'</div>').insertBefore('.msg_push');
        $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
        }
        
    $(this).val('');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

It was just a lot of preferences, since the append is more practical. The essential question is in the fact of:

• To variables userName and Id must be declared.
• Is the script with the keypress() should come after the creation of tags, so that it recognizes them.