Javascript function dynamic DIV attribute is not including the div content

Question

In my coding I used javascript function for dynamically creating the div and its attributes

Here is my coding for html

<p >Poll Choice</p>

<input type=hidden name="choicecount" id="choicecount" value="1">

<input type=file name="choiceimg1" value ="Select"  onchange="readURL(this)" style="display:none;">

  <script language="JavaScript" type="text/javascript">

  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();
  }

  </script>

    <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="choicename1" id="firstremove2">

                <input type="button" value="Remove" id="firstremove3" onclick="document.getElementById('imgbg').style.display='none';document.getElementById('firstremove').style.display='none';document.getElementById('viewimg1').style.display='none';document.getElementById('firstremove2').style.display='none';document.getElementById('firstremove3').style.display='none';" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">
            </div>
    </div>
<img src="#" name="viewimg1" class="addmultiple" id="viewimg1" height="70px" width="85px" style="display:none"/>

<br />
    </div>
<span id="file" ></span>

<input id="addchoice" type=button value="Add New Entry" onclick="addnew(document.forms['addpoll']['choicecount'].value);">

When the user clicks the addnewentry button it calls an function addnew(count). The count indicates the no of choices that is added by the user. Here is the coding for that addpoll function - javascript

<script>
    function addnew(type)
    {

    type=parseInt(type)+1;
    var name="choiceimg"+type;
    var name10="choiceimgs"+type;
    var name1="choicename"+type;
    var name2="viewimg"+type;
    var name3="remover"+type;
    var name4="br"+type;
    var mydiv = document.createElement("div");
    mydiv.setAttribute("id",imgbg);
    mydiv.setAttribute("style","width:110px;height:80px;float:left;text-align:center;border:1px solid #ccc;");
    var text = document.createElement("input");
    text.setAttribute("id", name10);
    text.setAttribute("type", "button");
    text.setAttribute("class", "addmultiple");
    text.setAttribute("style", "width: 190px");
    text.setAttribute("style", "padding-left: 5px;&nbsp;");
    text.setAttribute("value", "Browse");
    text.setAttribute("onclick", "HandleFileButtonClick(this)");
    text.setAttribute("name", name10);
    var textf = document.createElement("input");
    textf.setAttribute("type", "file");
    textf.setAttribute("class", "addmultiple");
    textf.setAttribute("style", "width: 246px");
    textf.setAttribute("style", "display:none;");
    textf.setAttribute("name", name);
    textf.setAttribute("onChange", "readURL(this)");
    var file = document.createElement("input");
    file.setAttribute("type", "text");
    file.setAttribute("name", name1);
    file.setAttribute("style", "margin-top: 60px;");
    var viewimg = document.createElement("img");
    viewimg.setAttribute("src", "#");
    viewimg.setAttribute("id", name2);
    viewimg.setAttribute("width", "85px");
    viewimg.setAttribute("height", "70px");
    viewimg.setAttribute("name", name2);
    viewimg.setAttribute("style", "display:none");
    viewimg.setAttribute("class", "addmultiple");
    var remove = document.createElement("input");
    remove.setAttribute("type", "button");
    remove.setAttribute("value", "Remove");
    remove.setAttribute("style", "color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;");
    remove.setAttribute("name", name3);
    remove.setAttribute("onclick", "remove(this)");
    var br1 = document.createElement("br");
    br1.setAttribute("id", name4);
    document.forms['addpoll']['choicecount'].value=type;
    var addfile = document.getElementById("file");
    var addtext = 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");
    myimgdiv.appendChild(mydiv);
    addtext.appendChild(text);
    addfile.appendChild(file);
    remove1.appendChild(remove);
    view.appendChild(viewimg);
    br2.appendChild(br1);
    textf1.appendChild(textf);

    }

    </script>

What I want to change here is,

When the mydiv is appendding to the file, It takes the div as separate and the image as separate.

In the above image the first set including the box with browse button, text box for choicename and remove button are from coding within the form. The below three sets are added dynamically by the addnew function. But the box is not including the browse button within it. and also i want the same style as the first div. But after i spending time for a full day i cant change the dynamic divs as the same as first div. Anybody could help me for solve this problem. Thanks for reading and helping me to solvet this

Answer 1

A number of things need to be changed in your javascript function:

Referencing,

mydiv.setAttribute("id",imgbg)

imgbg refers to nothing so instead create a new unique variable

var name5="imgbg"+type
mydiv.setAttribute("id",name5)

This will allow to refer to this particular div later when you want to append the button.

Styling, put all your styles together like so:

text.setAttribute("style", "padding-left: 5px;margin-top: 30px;");

Sequencing, only after you've appended the containing div, you can append the button to it:

var myimgdiv = document.getElementById("file");
myimgdiv.appendChild(mydiv);
var addtext = document.getElementById(name5);
addtext.appendChild(text);

Quick example: http://jsfiddle.net/3Sd4W/