Funkcja JavaScript atrybut dynamiczny DIV nie jest w tym zawartości div

Question

W moim kodowania użyłem funkcji javascript do dynamicznego tworzenia div i jego atrybuty

Oto mój kodowanie 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);"> 

gdy użytkownik kliknie przycisk addnehentry wywołuje funkcję addnew (count). Liczba wskazuje liczbę opcji dodawanych przez użytkownika. Oto kodowania dla tej funkcji 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> 

Co chcę zmienić tutaj znaczy

Gdy myDiv jest appendding do pliku, trwa div jako odrębne i obraz jako oddzielne.

W powyższym obrazie pierwszy zestaw w tym pudełku z przycisku Przeglądaj, polu tekstowym choicename i usunąć przycisk z kodowania są w formie. Poniższe trzy zestawy są dodawane dynamicznie przez funkcję addnew. Ale pudełko nie zawiera przycisku przeglądania. a także chcę tego samego stylu, co pierwszy div. Ale po tym, jak spędzam czas na cały dzień, nie mogę zmienić dynamicznych elementów div tak jak pierwszy div. Każdy może mi pomóc w rozwiązaniu tego problemu. Dzięki za czytanie i pomaga mi solvet to

Answer 1

Wiele rzeczy muszą być zmieniane w funkcji javascript:

Wywołanie,

mydiv.setAttribute("id",imgbg) 

imgbg odnosi się do niczego, więc zamiast tworzyć nowy unikalna zmienna

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

Pozwoli to na odnoszenie się do tego konkretnego div później, kiedy chcesz dołączyć przycisk.

Styling, umieścić wszystkie style razem tak:

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

Sekwencjonowanie, dopiero po dołączany zawierający div, można dodać przycisk do niego:

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

Szybki przykład: http://jsfiddle.net/3Sd4W/