Feed variable within variable

What you want does not match the concept of "variable". Variable is a memory space that will be reserved for storing values by your program / application. What you want may be achieved by a property (here we are entering the concept of object orientation) or a function.

The javascript language allows you to create "inline" functions and for your purpose we can use an approximation of your code as shown below:

var recebeMensagem = '';
var mensagemBot = function() {
    return '<div class="bot_mensagens">' + recebeMensagem + '</div>';
};
var conteudoHtml = '';
conteudoHtml = $('.recebe_as_mensagens').html();
recebeMensagem = 'Olá';
conteudoHtml += mensagemBot();
$('.recebe_as_mensagens').html(conteudoHtml);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="recebe_as_mensagens"></div>

Just ratifying, in the example above, each time the mensagemBot() function is used, it will bring the div element with the content equal to that of the recebeMensagem variable on its return. (If the contents of the variable is changed, the return of the function will also be).

I'll risk an adaptation of the code that may be what you want. Following Netinho's answer line , I believe you can solve it. If this is the case, the credits are from Netinho, because I just adapted his code.

var recebeMensagem = []

var mensagemBot = '<div class="bot_mensagens">' + recebeMensagem + '</div>';
var conteudoHtml = '';
conteudoHtml = $('.recebe_as_mensagens').html();

recebeMensagem += 'Olá';
recebeMensagem += 'Tudo bem?';
recebeMensagem += 'Tchau';

conteudoHtml += mensagemBot;
$('.recebe_as_mensagens').html(conteudoHtml);
$(".bot_mensagens").text(recebeMensagem)

Here you have a vector in Javascript recebeMensagem = [] , now you just have to move the items into the vector and the messages will be stored in different positions.

Following the same logic, you can scan your array and display the results as follows:

for(var i = 0; i < recebeMensagem.length; i++){
  conteudoHtml = mensagemBot;
  $('.recebe_as_mensagens').html(conteudoHtml);
  $(".bot_mensagens").text(recebeMensagem)
}

  

See in JsFiddle

I hope it helps, I just tried to adjust the logic, I do not have much experience with Javascript. Hugs!

You can use a little more of ES6 if you want to make your code more fancy.

const outputMessage = message => '<div class="bot_mensagens">${message || 'Olá'}</div>';
$('.recebe_as_mensagens').append(outputMessage());
$('.recebe_as_mensagens').append(outputMessage('Tc de onde?'));

You're getting the value in the recebeMensagem variable and you're not using it anywhere. To set the value of the variable in div use the function text ()

var recebeMensagem = '';
var mensagemBot = '<div class="bot_mensagens">' + recebeMensagem + '</div>';
var conteudoHtml = '';
conteudoHtml = $('.recebe_as_mensagens').html();
recebeMensagem = 'Olá';
conteudoHtml += mensagemBot;
$('.recebe_as_mensagens').html(conteudoHtml);
$(".bot_mensagens").text(recebeMensagem)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="recebe_as_mensagens"></div>