我想这样做,以便每当我按下一个按钮时,就会出现一个带有文本的框。 在创建框时应显示的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;
}
答案 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>