Javascript Function: Dynamically Created Div Layout Issue

http://jsfiddle.net/3Sd4W/ Reference: The above js fiddle provided by greener. If the new Entry Button is clicked, there is an layout issue for that new added object. The text box

Solution 1:

Your code is extremely complicated to read, so this may help:

HTML:

<form name="addpoll">

<div id="choices">


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

</form>

JS:

function addnewDiv(counterAppended) {
    counterAppended = parseInt(counterAppended) + 1;
    var text = document.createElement("div");
    text.innerHTML = '<inputtype="hidden"class="choicecount"name="choicecount"id="choicecount"value="' + counterAppended + '">\
<inputtype="file"name="choiceimg' + counterAppended + '"value ="Select"onchange="readURL(this)"style="display:none;">\
<div>\
<divstyle="width:400px;height:85px;">\
<divid="imgbg"style="float:left;width: 110px;height: 80px;text-align: center;border: 1px solid #CCC;">\
<inputtype="button"onclick="HandFileButtonClick();"value="Browse"id="firstremove"style="margin-top: 30px;"class="addmultiple">\
</div>\
<divstyle="float:right;margin-top: 30px;">\
<inputtype=textname="choicename' + counterAppended + '"id="firstremove2">\
<inputtype="button"value="Remove"class="remove"id="firstremove3"style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">\
</div>\
</div>\
<imgsrc="#"name="viewimg' + counterAppended + '"class="addmultiple"id="viewimg' + counterAppended + '"height="70px"width="85px"style="display:none"/>\
<br>\
</div>\
<spanid="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);

JsFiddle: http://jsfiddle.net/99vhF/1/

Solution 2:

The first row uses a wrapper div for the input field with a style attribute containing float: right. The generated row (after clicking 'add new entry' button) does not have a div wrapper with the same attribute around the input.

Solution 3:

You add elements to incorrect nodes. Review you "add" part. All of variables take "file" element. It looks odd:

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");