0
我正在製作一個應該從某個數據庫檢索數據的程序，列出放在同一個div中的按鈕上的一些數據，並用按鈕onclick形成新的div，直到達到某個最大值。爲了讓這個例子對其他人有用，我沒有從DB中檢索數據，而是使用了一些常規數字（值5被分配給變量levmax，並且每個for循環都有一些指定值，但是所有這些值都應該從D B）。彼此相鄰的多個DIV
我遇到的問題是如何把所有的DIV放在一起。我在這裏找到的所有示例都解釋瞭如何在代碼的HTML部分中創建對齊。但我想在JS部分創建我的DIV。
代碼工作正常，除了所有DIV彼此相鄰的部分。代碼有80行，但我需要的是如何對齊DIV。這裏是代碼：
<html>
<head>
<script>
var lev = 0;
var levmax=5;
var count = 0;
function addBu(){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<3; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
if(lev===1){
bu.addEventListener("click", novo);
}
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
};
function novo(){
if(lev===1){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<4; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.addEventListener("click", repeat);
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
}
function repeat(){
if(lev<levmax){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<2; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.addEventListener("click", repeat);
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
var le=(lev-1).toString();
document.getElementById(le).removeEventListener("click", repeat);
}
}
}
</script>
</head>
<body id="kod" onload="addBu()">
</body>
</html>enter code here
<head>
<script>
var lev = 0;
var levmax=5;
var count = 0;
function addBu(){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<3; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
if(lev===1){
bu.addEventListener("click", novo);
}
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
};
function novo(){
if(lev===1){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<4; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.addEventListener("click", repeat);
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
}
function repeat(){
if(lev<levmax){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<2; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.addEventListener("click", repeat);
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
var le=(lev-1).toString();
document.getElementById(le).removeEventListener("click", repeat);
}
}
}
</script>
</head>
<body id="kod" onload="addBu()">
</body>
</html>