Create div element with button inside

Question

I am new to front end development so bear with me. I am trying to create an element using javascript which is a div that I previously made and trying to put a button inside of that div.

I can't seem to find a way to get the button inside the div even with the correct css applied to it that worked previously.

I have tried using the css that put the button in my other div.

 function stopDesc(){ //low scenario if (!document.getElementById('rnaLow').disabled){ var divLow = document.createElement('div'); var divLowButton1 = document.createElement('button'); divLow.classList = 'bubble'; divLow.innerHTML = 'text stuff'; divLowButton1.innerHTML = "Next step->"; //divLowButton1.innerHTML = "See Again!"; //divLowButton1.classList = "button"; divLowButton1.classList.add("b1"); document.getElementById('container1').appendChild(divLow); document.getElementById('container1').appendChild(divLowButton1); //document.getElementsByTagName("container") [0].appendChild(divLowButton1); } }

 .b1 { background-color: maroon; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }

 <div class="container" id="container1"> <div class="bubble"> Welcome to Noise Laboratories, Click begin to start learning about noise <div> <button onclick = "disableMediumHigh()" id="button1"> Begin! </button> <button onclick = "skip()" type = "button" id="button1"> Skip </button> </div> </div> </div>

The button keeps appearing to the right and outside of my div and not inside like I am intending it to be.

Answer 1

I am new to front end development so bear with me. I am trying to create an element using javascript which is a div that I previously made and trying to put a button inside of that div.

I can't seem to find a way to get the button inside the div even with the correct css applied to it that worked previously.

I have tried using the css that put the button in my other div.

 function stopDesc(){ //low scenario if (!document.getElementById('rnaLow').disabled){ var divLow = document.createElement('div'); var divLowButton1 = document.createElement('button'); divLow.classList = 'bubble'; divLow.innerHTML = 'text stuff'; divLowButton1.innerHTML = "Next step->"; //divLowButton1.innerHTML = "See Again!"; //divLowButton1.classList = "button"; divLowButton1.classList.add("b1"); document.getElementById('container1').appendChild(divLow); document.getElementById('container1').appendChild(divLowButton1); //document.getElementsByTagName("container") [0].appendChild(divLowButton1); } }

 .b1 { background-color: maroon; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }

 <div class="container" id="container1"> <div class="bubble"> Welcome to Noise Laboratories, Click begin to start learning about noise <div> <button onclick = "disableMediumHigh()" id="button1"> Begin! </button> <button onclick = "skip()" type = "button" id="button1"> Skip </button> </div> </div> </div>

The button keeps appearing to the right and outside of my div and not inside like I am intending it to be.

Answer 2

I am new to front end development so bear with me. I am trying to create an element using javascript which is a div that I previously made and trying to put a button inside of that div.

I can't seem to find a way to get the button inside the div even with the correct css applied to it that worked previously.

I have tried using the css that put the button in my other div.

 function stopDesc(){ //low scenario if (!document.getElementById('rnaLow').disabled){ var divLow = document.createElement('div'); var divLowButton1 = document.createElement('button'); divLow.classList = 'bubble'; divLow.innerHTML = 'text stuff'; divLowButton1.innerHTML = "Next step->"; //divLowButton1.innerHTML = "See Again!"; //divLowButton1.classList = "button"; divLowButton1.classList.add("b1"); document.getElementById('container1').appendChild(divLow); document.getElementById('container1').appendChild(divLowButton1); //document.getElementsByTagName("container") [0].appendChild(divLowButton1); } }

 .b1 { background-color: maroon; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }

 <div class="container" id="container1"> <div class="bubble"> Welcome to Noise Laboratories, Click begin to start learning about noise <div> <button onclick = "disableMediumHigh()" id="button1"> Begin! </button> <button onclick = "skip()" type = "button" id="button1"> Skip </button> </div> </div> </div>

The button keeps appearing to the right and outside of my div and not inside like I am intending it to be.

Answer 3

I am new to front end development so bear with me. I am trying to create an element using javascript which is a div that I previously made and trying to put a button inside of that div.

I can't seem to find a way to get the button inside the div even with the correct css applied to it that worked previously.

I have tried using the css that put the button in my other div.

 function stopDesc(){ //low scenario if (!document.getElementById('rnaLow').disabled){ var divLow = document.createElement('div'); var divLowButton1 = document.createElement('button'); divLow.classList = 'bubble'; divLow.innerHTML = 'text stuff'; divLowButton1.innerHTML = "Next step->"; //divLowButton1.innerHTML = "See Again!"; //divLowButton1.classList = "button"; divLowButton1.classList.add("b1"); document.getElementById('container1').appendChild(divLow); document.getElementById('container1').appendChild(divLowButton1); //document.getElementsByTagName("container") [0].appendChild(divLowButton1); } }

 .b1 { background-color: maroon; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }

 <div class="container" id="container1"> <div class="bubble"> Welcome to Noise Laboratories, Click begin to start learning about noise <div> <button onclick = "disableMediumHigh()" id="button1"> Begin! </button> <button onclick = "skip()" type = "button" id="button1"> Skip </button> </div> </div> </div>

The button keeps appearing to the right and outside of my div and not inside like I am intending it to be.