Как создать коробку при нажатии кнопки - PullRequest
Новая
       8

Как создать коробку при нажатии кнопки

0 голосов
/ 27 ноября 2018

Я хотел бы сделать так, чтобы при каждом нажатии кнопки появлялось окно с текстом в нем.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 голосов
/ 27 ноября 2018

С некоторыми незначительными изменениями вы здесь: 

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>
0 голосов
/ 27 ноября 2018

Попробуйте это 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...