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附加到文件时，它将div作为单独的图像并将图像作为单独的图像。

Div dynamically created by addnew function

在上面的图像中，第一组包括带有浏览按钮的框，用于选择名称的文本框和删除按钮来自表格内的编码。以下三组由addnew函数动态添加。但该框不包括其中的浏览按钮。而且我想要与第一个div相同的风格。但是在我花了一整天的时间后，我不能像第一个div那样改变动态div。任何人都可以帮我解决这个问题。感谢您阅读并帮助我解决此问题

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/

Javascript函数动态DIV属性不包括div内容

1 个答案: