Javascript 创建内部带有按钮的div元素_Javascript_Html_Css

Javascript 创建内部带有按钮的div元素

javascript html css

Javascript 创建内部带有按钮的div元素,javascript,html,css,Javascript,Html,Css,我是新的前端开发，所以请容忍我。我正在尝试使用javascript创建一个元素，这是我之前创建的一个div，并尝试在该div中放置一个按钮我似乎找不到一种方法将按钮放在div中，即使对它应用了正确的css，它以前也可以工作我尝试过使用css，将按钮放在我的另一个div中函数stopDesc（）{ //低情景如果（！document.getElementById（'rnaLow'）。已禁用）{ var divLow=document.createElement（'div'）； var d

我是新的前端开发，所以请容忍我。我正在尝试使用javascript创建一个元素，这是我之前创建的一个div，并尝试在该div中放置一个按钮

我似乎找不到一种方法将按钮放在div中，即使对它应用了正确的css，它以前也可以工作

我尝试过使用css，将按钮放在我的另一个div中

函数stopDesc（）{
//低情景
如果（！document.getElementById（'rnaLow'）。已禁用）{
var divLow=document.createElement（'div'）；
var divLowButton1=document.createElement（“按钮”）；
divLow.classList='bubble'；
divLow.innerHTML='text stuff'；
divLowButton1.innerHTML=“下一步->”；
//divLowButton1.innerHTML=“再次查看！”；
//divLowButton1.classList=“按钮”；
divLowButton1.classList.add（“b1”）；
document.getElementById（'container1'）.appendChild（divLow）；
document.getElementById（'container1'）.appendChild（divLowButton1）；
//document.getElementsByTagName（“容器”）
[0].appendChild（divLowButton1）；
}
}

.b1{
背景颜色：栗色；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}


欢迎来到噪声实验室，单击“开始”开始学习噪声
开始！
跳过

我认为显示的代码缺少一些信息。但是，下面是一个超级基本的示例，说明如何将按钮附加到给定元素

函数addButtonToContainer（）{
const container=document.getElementById（'buttonContainer'）；
const button=document.createElement（'button'）；
button.innerText='新建按钮'；
container.appendChild（按钮）；
}
document.getElementById（'addButton'）。addEventListener（'click'，addButtonToContainer）

添加按钮
我认为显示的代码缺少一些信息。但是，下面是一个超级基本的示例，说明如何将按钮附加到给定元素

函数addButtonToContainer（）{
const container=document.getElementById（'buttonContainer'）；
const button=document.createElement（'button'）；
button.innerText='新建按钮'；
container.appendChild（按钮）；
}
document.getElementById（'addButton'）。addEventListener（'click'，addButtonToContainer）

添加按钮
如果希望按钮出现在divLow
元素内部，则应使用divLow.appendChild（divLowButton1）而不是document.getElementById（'container1'）.appendChild（divLowButton1）
如果希望按钮显示在div的文本下方（不在右侧），则应在CSS中使用display:block
，而不是display:inline block
如果希望按钮出现在divLow
元素内部，则应使用divLow.appendChild（divLowButton1）而不是document.getElementById（'container1'）.appendChild（divLowButton1）
如果您希望按钮显示在div的文本下（不在右侧），则应在CSS中使用display:block
，而不是display:inline block将代码片段放在一起，我就得到了一个工作状态
并且稍微改变一下。
请参阅下面的代码。这就是你想要实现的吗
单击（添加的）按钮“特殊”以运行该功能，
也，
我必须在函数开始时禁用检查
（您的代码段中没有声明/定义它；您可能希望
在完整代码中保持启用状态）
我做的主要事情是改变
   [0].appendChild(divLowButton1);

进入
我的汇编如下：
//----compiledfoo.html----

身体{
背景色：亚麻布；
}
h1{
颜色：栗色；
左边距：40px；
}
欢迎来到噪声实验室，单击“开始”开始学习噪声
开始！
跳过
特别的
函数stopDesc（）{
//低情景
//如果（！document.getElementById（'rnaLow'）.disabled）{/@@1/2中放回
var divLow=document.createElement（'div'）；
var divLowButton1=document.createElement（“按钮”）；
divLow.classList='bubble'；
divLow.innerHTML='text stuff'；
divLowButton1.innerHTML=“下一步->”；
//divLowButton1.innerHTML=“再次查看！”；
//divLowButton1.classList=“按钮”；
divLowButton1.classList.add（“b1”）；
document.getElementById（'container1'）.appendChild（divLow）；
document.getElementById（'container1'）.appendChild（divLowButton1）；
//document.getElementsByTagName（“容器”）
document.getElementById（'container1'）.appendChild（divLowButton1）；
divLowButton1.setAttribute（“类”、“b1”）；
//}/@@2/2将其放回
}
通过将代码片段放在一起，我得到了一个工作环境
并且稍微改变一下。
请参阅下面的代码。这就是你想要实现的吗
单击（添加的）按钮“特殊”以运行该功能，
也，
我必须在函数开始时禁用检查
（您的代码段中没有声明/定义它；您可能希望
在完整代码中保持启用状态）
我做的主要事情是改变
   [0].appendChild(divLowButton1);

进入
我的汇编如下：
//----compiledfoo.html----

身体{
背景色：亚麻布；
}
h1{
颜色：栗色；
左边距：40px；
}
欢迎来到噪声实验室，单击“开始”开始学习噪声
开始！
跳过
特别的
函数stopDesc（）{
//低情景
//如果（！document.getElementById（'rnaLow'）.disabled）{/@@1/2中放回
var divLow=do
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: linen;
      }

      h1 {
      color: maroon;
      margin-left: 40px;
      }
    </style>
  </head>
  <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="button2"> Skip </button>
        <button onclick = "stopDesc()" type = "button" id="buttonspecial"> SPECIAL </button>
      </div>
    </div>
  </div>
  <script>
    function stopDesc(){
    //low scenario
    // if (!document.getElementById('rnaLow').disabled){     // @@   put this back in 1/2
    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")
    document.getElementById('container1').appendChild(divLowButton1);
    divLowButton1.setAttribute("class","b1");
    // }                                                // @@   put this back in 2/2
    }
  </script>
</html>