I want to demonstrate the ability to send a message without hardcoding all messages in my frontend. I utilized existing code from this link shared by another developer.
I have included the id="msg" in the input field and id="chatpanel" with class chat-panel.
Picture attached. However, the problem is that the message is sent (displayed), but the bubble appears below the input areahttps://i.sstatic.net/P4FbC.png
Below is my additional JS code.
function send(){
var msg = document.getElementById("msg").value;
var div1= document.createElement("div");
div1.classList.add("row","no-gutters");
var div2= document.createElement("div");
div2.classList.add("col-md-3","offset-md-9");
var div3= document.createElement("div");
div3.classList.add("chat-bubble","chat-bubble--right");
var text = document.createTextNode(msg);
div3.appendChild(text);
div2.appendChild(div3);
div1.appendChild(div2);
var main = document.getElementById("chatpanel");
main.appendChild(div1);
}