Javascript函数：动态创建的div布局问题

参考：上述js小提琴由提供

如果单击“新建条目”按钮，则新添加的对象存在布局问题

文本框样式为：

file.setAttribute("style", "margin-top: 60px;");

---

<>但是我希望文本框在中间而不是在底部。我自己试过，但对我不起作用。有人能帮我解决这个问题吗？

第一行使用包装器

div

作为输入字段，其样式属性包含

float:right

。生成的行（单击“添加新条目”按钮后）在输入周围没有具有相同属性的div包装。

您将元素添加到错误的节点。复习你“添加”的部分。所有变量都采用“file”元素。看起来很奇怪：

var addfile = document.getElementById("file");

var view = document.getElementById("file");
var remove1 = document.getElementById("file");
var br2 = document.getElementById("file");
var textf1 = document.getElementById("file");
var myimgdiv = document.getElementById("file");

---

您的代码非常复杂，因此以下内容可能会有所帮助：

HTML:

JS:

函数addnewDiv（反附加）{
反附加=parseInt（反附加）+1；
var text=document.createElement（“div”）；
text.innerHTML=\
\
\
\
\
\
\
\
\
\
\
\
\

\
\
';
text.id='choice'+追加反符；
document.getElementById（“选项”）.appendChild（文本）；
document.getElementsByClassName（“remove”）[document.getElementsByClassName（“remove”）.length-1].addEventListener（“单击”，函数（）{
this.parentNode.parentNode.parentNode.parentNode.removeChild（this.parentNode.parentNode.parentNode）；
});
}
函数HandFileButtonClick（）{
document.addpoll.choiceimg1.click（）；
}
功能手柄FileButtonClick（val）{
var ss=val.name；
文件格式[“addpoll”]
var n=拆分（“选择”）；
document.forms[“addpoll”][“choiceimg”+n[1]]。单击（）；
}
document.getElementById（“addchoice”）.addEventListener（“单击”，函数（）{
var choicecounts=document.getElementsByClassName（'choicecount'）；
addnewDiv（choicecounts[choicecounts.length-1]。值）；
});
addnewDiv（0）；

---

JSFIDLE:

如何为该元素集添加div这是一项非常好的工作。有用的编码，但我不能集成到我的编码。

<form name="addpoll">

<div id="choices">


</div>
<input id="addchoice" type="button" value="Add New Entry">

</form>

function addnewDiv(counterAppended) {
    counterAppended = parseInt(counterAppended) + 1;
    var text = document.createElement("div");
    text.innerHTML = '<input type="hidden" class="choicecount" name="choicecount" id="choicecount" value="' + counterAppended + '">\
<input type="file" name="choiceimg' + counterAppended + '" value ="Select"  onchange="readURL(this)" style="display:none;">\
<div>\
<div style="width:400px;height:85px;">\
<div id="imgbg" style="float:left;width: 110px;height: 80px;text-align: center;border: 1px solid #CCC;">\
<input type="button" onclick="HandFileButtonClick();"  value="Browse" id="firstremove" style="margin-top: 30px;" class="addmultiple">\
</div>\
<div style="float:right;margin-top: 30px;">\
<input type=text name="choicename' + counterAppended + '" id="firstremove2">\
<input type="button" value="Remove" class="remove" id="firstremove3" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">\
</div>\
</div>\
<img src="#" name="viewimg' + counterAppended + '" class="addmultiple" id="viewimg' + counterAppended + '" height="70px" width="85px" style="display:none"/>\
<br>\
</div>\
<span id="file"></span>';
    text.id = 'choice' + counterAppended;
    document.getElementById("choices").appendChild(text);
    document.getElementsByClassName("remove")[document.getElementsByClassName("remove").length - 1].addEventListener("click", function() {
        this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);
    });
}

function HandFileButtonClick() {
    document.addpoll.choiceimg1.click();
}

function HandleFileButtonClick(val) {
    var ss = val.name;
    document.forms["addpoll"]
    var n = ss.split("choiceimgs");
    document.forms["addpoll"]["choiceimg" + n[1]].click();
}
document.getElementById("addchoice").addEventListener("click", function() {
    var choicecounts = document.getElementsByClassName('choicecount');
    addnewDiv(choicecounts[choicecounts.length - 1].value);
});

addnewDiv(0);