JavaScript函數動態DIV屬性不包括在div內容

Question

在我的編碼我用javascript函數用於動態創建div和它的屬性

這裏是我的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);"> 

用戶點擊時編碼addnewentry按鈕它調用一個函數addnew（count）。計數表示用戶添加的選項的數量。以下是一個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> 

我想在這裏改變的是，

當mydiv被appendding到文件，這需要在div作爲單獨的圖像作爲單獨的。

在上述圖像的第一集合包括與瀏覽按鈕的框，文本框用於choicename和刪除按鈕是從表單內編碼。以下三組由addnew函數動態添加。但該框不包括其中的瀏覽按鈕。而且我也想要和第一個div一樣的風格。但是我花了整整一天的時間後，我不能像第一個div一樣改變動態div。任何人都可以幫助我解決這個問題。感謝您閱讀並幫助我solvet這個

Answer 1

許多事情需要在你的JavaScript功能改變：

引用，

mydiv.setAttribute("id",imgbg) 

imgbg指的是什麼所以不是創建一個新的獨特變量

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

這將允許稍後在添加按鈕時引用此特定的div。

造型，把你所有的風格在一起，就像這樣：

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

測序，你已經附加了包含div只後，可以追加按鈕將它：

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

快速示例：http://jsfiddle.net/3Sd4W/