funzione Javascript attributo DIV dinamica non sta comprendendo il contenuto div

Question

Nel mio codice ho usato funzione javascript per creare dinamicamente il div ei suoi attributi

Qui è il mio codice per 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);"> 

quando l'utente il pulsante addnewentry chiama una funzione addnew (count). Il conteggio indica il numero di scelte aggiunte dall'utente. Ecco il codice per tale funzione addpoll - 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> 

Cosa voglio cambiare qui è,

Quando il myDiv è appendding al file, ci vuole il div come separato e l'immagine come separato.

Nell'immagine sopra il primo set tra cui la scatola con pulsante Sfoglia, casella di testo per choicename e il pulsante rimuovere sono dalla codifica all'interno del modulo. I tre set seguenti sono aggiunti dinamicamente dalla funzione addnew. Ma la scatola non include il pulsante Sfoglia all'interno di esso. e voglio anche lo stesso stile del primo div. Ma dopo aver trascorso del tempo per un giorno intero, non posso cambiare i div dinamici come quelli del primo div. Qualcuno potrebbe aiutarmi a risolvere questo problema. Grazie per la lettura e avermi aiutato a solvet questo

Answer 1

Un certo numero di cose devono essere cambiate in funzione javascript:

Riferimento,

mydiv.setAttribute("id",imgbg) 

imgbg si riferisce a nulla di così, invece di creare un nuovo unica variabile

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

Ciò consentirà di fare riferimento a questo particolare div più avanti quando si desidera aggiungere il pulsante.

Styling, mettere tutti i vostri stili insieme in questo modo:

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

Sequencing, solo dopo aver aggiunto la contenente div, è possibile aggiungere il pulsante per esso:

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

Esempio rapido: http://jsfiddle.net/3Sd4W/