问题描述

JS 动态生成元素 怎么让他添加一个包容DIV或者说，我怎么让他四个换一行呢？

为什么我一开始是4个一行...后来是一个一行？
谷歌F12看了一下，代码都是一个格式生成的呀？我如何给他包一个div去控制格式，或者说写一个JS去让他四个换行？有大神能解释一下为什么这个布局会这样子？
JS代码：

function addlink(){
var x = 1;
var linkdiv = document.getElementById("friendlink");
if (linkdiv.attributes.currentindex.value) {
var tmp = linkdiv.attributes.currentindex.value;
x = parseInt(tmp) + 1;
}
linkdiv.setAttribute('currentindex', x);

var yadd = 'link[js'+x+'][add]';
var yname = 'link[js'+x+'][name]';
var yimg='link[js'+x+'][plus]';

//$("#friendlink").append("<div class='new-stu-append'>");

var checkbox1 = document.createElement('input');
checkbox1.setAttribute('type', 'checkbox');
checkbox1.setAttribute('style','float:left;');
checkbox1.setAttribute('name', yadd);

console.log(yadd);

var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('placeholder', '请填写学员的名字'+x);
input1.setAttribute('style','float:left;');
input1.setAttribute('name', yname);

console.log(yname);

var input2 = document.createElement('div');
//input2.setAttribute('type', 'image');
//input2.setAttribute('id', 'my-stu-icon-image');
//input2.setAttribute('class', 'reduce-icon');
input2.setAttribute('style','background:url(images/plus.png) no-repeat;background-position:0 -15px; width:20px;height:20px;float:left;cursor:pointer;');
input2.setAttribute('onclick', "reduce_stu()");
//input2.setAttribute('src', 'images/plus.png');
//input2.setAttribute('name', yimg);

if(x/4)
var br = document.createElement('br');

linkdiv.insertBefore(checkbox1,null);
linkdiv.insertBefore(input1,null);
linkdiv.insertBefore(input2,null);
linkdiv.insertBefore(br,null);
//$("#friendlink").append("</div>");

}

解决方案

function addlink(){
var x = 1;
var linkdiv = document.getElementById("friendlink");
if (linkdiv.attributes.currentindex.value) {
var tmp = linkdiv.attributes.currentindex.value;
x = parseInt(tmp) + 1;
}
linkdiv.setAttribute('currentindex', x);

var yadd = 'link[js'+x+'][add]';
var yname = 'link[js'+x+'][name]';
var yimg='link[js'+x+'][plus]';

//$("#friendlink").append("<div class='new-stu-append'>");

var checkbox1 = document.createElement('input');
checkbox1.setAttribute('type', 'checkbox');
checkbox1.setAttribute('style','float:left;');
checkbox1.setAttribute('name', yadd);

console.log(yadd);

var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('placeholder', '请填写学员的名字'+x);
input1.setAttribute('style','float:left;');
input1.setAttribute('name', yname);

console.log(yname);

var input2 = document.createElement('div');
//input2.setAttribute('type', 'image');
//input2.setAttribute('id', 'my-stu-icon-image');
//input2.setAttribute('class', 'reduce-icon');
input2.setAttribute('style','background:url(images/plus.png) no-repeat;background-position:0 -15px; width:20px;height:20px;float:left;cursor:pointer;');
input2.setAttribute('onclick', "reduce_stu()");
//input2.setAttribute('src', 'images/plus.png');
//input2.setAttribute('name', yimg);

if(x/4)
var br = document.createElement('br');

linkdiv.insertBefore(checkbox1,null);
linkdiv.insertBefore(input1,null);
linkdiv.insertBefore(input2,null);
linkdiv.insertBefore(br,null);
//$("#friendlink").append("</div>");

}

解决方案二：

你添加的时候，一下就添加四个不就可以了？

解决方案三：

可是我要是要添加很多个呢...

解决方案四：

容器定宽，里面放入div 定宽float布局，所有子组件放入div里面，然后往容器添加div就行了，到底容器宽度会自动换行

解决方案五：

js动态添加div