Javascript-Funktion dynamische DIV Attribut umfasst nicht den div Inhalt

Question

In meiner Codierung ich für Javascript-Funktion verwenden dynamisch die div und seine Attribute zu schaffen

Hier ist meine Codierung für 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);"> 

Wenn der Benutzer klickt Der Addnewentry Knopf ruft eine Funktion Addnew (Count) auf. Die Anzahl gibt die Anzahl der Optionen an, die vom Benutzer hinzugefügt wurden. Hier ist die Codierung für die addpoll Funktion - 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> 

Was ich will, ist hier ändern,

Wenn die mydiv auf die Datei appendding, nimmt es die div als separate und das Bild als separate.

In der obigen Bild der erste Satz einschließlich der Box mit Schaltfläche Browse, Textbox für choicename und Knopf entfernen sind innerhalb der Form von Codierung. Die folgenden drei Sätze werden dynamisch durch die Funktion addnew hinzugefügt. Aber die Box enthält nicht die Schaltfläche Durchsuchen darin. und ich möchte auch den gleichen Stil wie das erste div. Aber nachdem ich Zeit für einen ganzen Tag verbracht habe, kann ich die dynamischen Divs nicht so verändern wie beim ersten Div. Jeder könnte mir helfen, dieses Problem zu lösen. Vielen Dank für das Lesen und hilft mir, diese müssen in Ihren JavaScript-Funktion geändert werden

Answer 1

Eine Reihe von Dingen zu Solvet:

Referenzierung,

mydiv.setAttribute("id",imgbg) 

imgbg nichts bezieht sich so erstellen, anstatt eine neue einzigartige variable

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

Dadurch kann später auf dieses bestimmte div zugegriffen werden, wenn Sie die Schaltfläche anhängen möchten.

Styling, setzen alle Arten zusammen etwa so:

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

Sequenzierung, erst, nachdem Sie das enthält div beigefügten haben, können Sie auf die Schaltfläche anhängen:

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

Schnelles Beispiel: http://jsfiddle.net/3Sd4W/