Question

我是前端开发的新手，所以请多多包涵。我正在尝试使用javascript创建元素，而javascript是我之前制作的div，并试图在该div中放置一个按钮。

即使将正确的CSS应用于之前可以正常工作，我似乎也找不到找到将按钮放入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>

该按钮一直显示在div的右侧和外部，而不是我想要的内部。

Answer 1

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

function addButtonToContainer() {
    const container = document.getElementById('buttonContainer');
    const button = document.createElement('button');
    button.innerText = 'New Button';
    container.appendChild(button);
}

document.getElementById('addButton').addEventListener('click', addButtonToContainer);

<div id="buttonContainer">

</div>

<button id="addButton">
Add Button
</button>

Answer 2

如果您希望button出现在divLow元素内，则应使用divLow.appendChild(divLowButton1);而不是document.getElementById('container1').appendChild(divLowButton1);。

如果您希望按钮显示在div的文本下方（而不是在右侧），则应在CSS中使用display: block而不是display: inline-block。

Answer 3

通过将代码段放在一起可以解决我的工作情况并改变一些东西。请参见下面的代码。这是您想要实现的目标吗？

点击（添加的）“特殊”按钮以运行该功能，也，我必须在功能开始时禁用检查（未在代码段中声明/定义；您可能想在完整代码中将其保持启用状态。

我主要要做的就是改变

Object.assign(video, res.data.items[0].statistics)

进入

   [0].appendChild(divLowButton1);

我的汇编如下：

// ----编译的foo.html ----

   document.getElementById('container1').appendChild(divLowButton1);

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

3 个答案: