简体   繁体   English

创建带有按钮的 div 元素

[英]Create div element with button inside

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.我正在尝试使用 javascript 创建一个元素,这是我之前制作的一个 div,并尝试在该 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.我似乎无法找到一种方法来获取 div 中的按钮,即使应用了之前有效的正确 css 也是如此。

I have tried using the css that put the button in my other div.我曾尝试使用将按钮放在我的其他 div 中的 css。

 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.该按钮一直出现在我的 div 的右侧和外部,而不是像我想要的那样出现在内部。

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.我正在尝试使用 javascript 创建一个元素,这是我之前制作的一个 div,并尝试在该 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.我似乎无法找到一种方法来获取 div 中的按钮,即使应用了之前有效的正确 css 也是如此。

I have tried using the css that put the button in my other div.我曾尝试使用将按钮放在我的其他 div 中的 css。

 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.该按钮一直出现在我的 div 的右侧和外部,而不是像我想要的那样出现在内部。

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.我正在尝试使用 javascript 创建一个元素,这是我之前制作的一个 div,并尝试在该 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.我似乎无法找到一种方法来获取 div 中的按钮,即使应用了之前有效的正确 css 也是如此。

I have tried using the css that put the button in my other div.我曾尝试使用将按钮放在我的其他 div 中的 css。

 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.该按钮一直出现在我的 div 的右侧和外部,而不是像我想要的那样出现在内部。

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.我正在尝试使用 javascript 创建一个元素,这是我之前制作的一个 div,并尝试在该 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.我似乎无法找到一种方法来获取 div 中的按钮,即使应用了之前有效的正确 css 也是如此。

I have tried using the css that put the button in my other div.我曾尝试使用将按钮放在我的其他 div 中的 css。

 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.该按钮一直出现在我的 div 的右侧和外部,而不是像我想要的那样出现在内部。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM