Я делаю программу, которая должна извлекать данные из некоторого БД, перечислять некоторые данные на кнопке, помещенной в один и тот же div, и формировать новый div с кнопками onclick, пока не достигнет некоторого максимального значения. Чтобы этот пример был полезен для других людей, я не извлекал данные из БД, вместо этого использовал некоторые общие числа (значение 5 присваивается переменной levmax, и каждый цикл цикла имеет определенное значение, но все эти значения должны быть получены из БД).Несколько DIVs рядом друг с другом
Проблема у меня есть, как поставить все DIVs рядом друг с другом. Все примеры, которые я нашел здесь, объясняют, как выровнять их, если они созданы в HTML-части кода. Но я хочу создать свои DIV в части JS.
Код работает отлично, за исключением части, где все DIVs стоят рядом друг с другом. Код имеет что-то вроде 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>