如何在按下按钮时创建一个框

时间:2018-11-27 19:32:39

标签: javascript html dom

我想这样做,以便每当我按下一个按钮时,就会出现一个带有文本的框。 在创建框时应显示的HTML。

<div class="trades">
</div>

<button onclick="create()">add</button>

用于创建它的Javascript函数

function create() {
    var box = document.createElement("div");
    creation.setAttribute('class', 'itembox');
    creation.setAttribute('id', 'itemBox');
    var holder = document.createElement("p");
    holder.setAttribute('id', 'output');
    var item = document.createTextNode("testing");
    holder.appendChild(item);
    box.appendChild(holder);
    var mainholder = document.getElementByClassName("trades");
}

CSS制作一个盒子

.itembox {
    border: 1px solid black;
}

2 个答案:

答案 0 :(得分:3)

您需要进行一些小的修改:

function create() {
  var box = document.createElement("div");
  box.setAttribute('class', 'itembox')
  var holder = document.createElement("p");
  holder.setAttribute('class', 'output');
  // You can set the inner text of the p tag without creating a text node.
  holder.innerText = "The text in the box"
  box.appendChild(holder);
  // Trades should be an element with and ID because you probably only ever want to insert into one place.
  var trades = document.getElementById("trades");
  trades.appendChild(box);
}
.itembox {
  border: 1px solid black;
}
<body>
  <div id="trades">
  </div>

  <button onclick="create()">add</button>
</body>

答案 1 :(得分:1)

尝试一下

function create() {
  var box = document.createElement("div");
  box.setAttribute('class', 'itembox');
  box.setAttribute('id', 'itemBox');
  var holder = document.createElement("p");
  holder.setAttribute('id', 'output');
  var item = document.createTextNode("testing");
  holder.appendChild(item);
  box.appendChild(holder);
  var mainholder = document.getElementsByClassName("trades")[0];
  mainholder.appendChild(box);
}
.itembox {
  border: 1px solid black;
}
<div class="trades">
</div>

<button onclick="create()">add</button>