Creating Elements with classes?

Question

So I'm trying to create a div that has the same styling as the example message. (name isn't actually required)

However, I need this div to be created via JS. I'm trying to make a messaging program(that won't actually ever work as a REAL messaging app like discord or kik. Just for funzies.) but I can't seem to figure out how to actually CREATE the messages. If I'm doing it wrong, please let me know. As for now, I'm pretty sure it's done with createElement, but I could be wrong.
https://code.sololearn.com/W84mxAR64Gc5/?ref=app

Answer 1

A basic example on how to create it and apply the styling. I'll leave the events like creation of the div on button clicks to you ^_^ .If you have problems, feel free to ask ^^
https://code.sololearn.com/WEBHw2O2T6cE/?ref=app

Answer 2

Daniel Cooper Just add this in the end of function Send() ~
MessageInput.value = "";
or
var msg_input = document.getElementById("MessageInput");
msg_input.value = "";

A simple fix....

Answer 3

Daniel Cooper then you should "actually" make the position fixed I think..Give some values for top and left too like ~
#InputContainer{
position:fixed;
left:10px;
top:10px;
}

Answer 4

Working example, clears input
https://code.sololearn.com/WOANi5fuOoiB/?ref=app

Answer 5

Nikhil I got it to work right after sending that. Lol. Thanks

Answer 6

I do have one more question. It's something I've had trouble with before. When setting the InputContainer position to fixed, it appears over the first message. How can I fix this?

Answer 7

https://code.sololearn.com/W84mxAR64Gc5/?ref=app

Working version, however I still can't get the input to clear on send.