So for this you are trying to manipulate the DOM using JavaScript, take your div#container and you are trying to append three button elements. The process for doing this (or really any HTML Element with JS DOM manipulation is fairly similar, you create the element, add the attributes you want, and then "append" it to the main element where you want it inserted)
Check out my example below to add 3 buttons to your <div id="container">:
var container = document.querySelector("#container"); //or use document.getElementById("container"), makes no difference
for (var i = 0; i < 3; i++) {
var button = document.createElement("button"); //works with any HTML5 element
button.setAttribute("attribute", "value"); //Use this to add attributes such as id, class, styles, or even event listeners like onclick
button.innerHTML = "Button Text"; //Make sure to add button text if you don't want an empty button!!
container.appendChild(button);
}
Since you said you want the buttons next to each other (I'm assuming this means side-by-side) then you can add a style to your CSS
button {
display: inline;
}
but of course that would depend on your usage, meaning if you wanted all buttons to be inline. If you wanted just those three then you can use the .setAttribute("class", "classname"); to add a class and then define that class to have the same style.
You can also make your container a CSS flexbox and have each of the buttons aligned horizontally
#container {
display: flexbox;
flex-direction: row; /*Use row for horizontal, column for vertical*/
}
and you wouldn't need to style your buttons. But the choice is yours.
Edit: to make 2 buttons, one green and one red,
//Make a green text button1
var button1 = document.createElement("button"); //works with any HTML5 element
button1.style.color = "green";
button1.innerHTML = "Button1 Text"; //Make sure to add button text if you don't want an empty button!!
container.appendChild(button1);
//Make a red text button2
var button2 = document.createElement("button"); //works with any HTML5 element
button2.style.color = "red";
button2.innerHTML = "Button2 Text"; //Make sure to add button text if you don't want an empty button!!
container.appendChild(button2);
If you wanted to change the background colors as well you could add button.style.backgroundColor = "pink" or whatever color you'd like
Check out: JavaScript DOM Methods, this was a REAL help to me when I was learning what you're trying to do right now!
To give the buttons a function use the onclick value of the button, so in the above script we can add something like this:
button1.onclick = button1AfterClicked;
//Or
button1.setAttribute("onclick", "button1AfterClicked");
And since JavaScript is pretty lenient we can define our button1AfterClicked() anywhere
function button1AfterClicked() {
button1.style.color = "some color";
//And so forth...
}
For these kinds of questions I highly suggest looking up the answer on google because I know W3Schools does a splendid job on explaining the basics and more: OnClick Event JavaScript
