Question

我正在研究一个上传公式，用户可以单击“添加”按钮，然后将显示“选择文件按钮”和“标题字段”。

如果用户再次单击“添加按钮”，则会显示一个新的按钮和字段，依此类推。

我的问题：我需要在div中添加这些元素，以便对其进行样式设置和更改。

添加元素确实有效，但是出于某种原因，添加div无效，并且还没有弄清楚该怎么做。

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>TEST1</title>
    <meta charset="UTF-8"/>
  </head>

  <body>

    <div id="media">
      <form>
        <div>
          <div id="container">&nbsp;</div>
          <input type="button" value="add" id="add" />
        </div>
      </form>
    </div>


  </body>

JavaScript代码

  <script>
    window.addEventListener("load", function()
    {
      document.getElementById("add").addEventListener("click", function()
      {
        // Create a div
        var container = document.createElement("div");
        container.setAttribute("class", "new_container[]");

        // Create a file input
        var file = document.createElement("input");
        file.setAttribute("type", "file");
        file.setAttribute("name", "sel_ad_file[]");

        // Create a break
        var br = document.createElement("br");

        // Create a text input
        var text = document.createElement("input");
        text.setAttribute("type", "text");
        text.setAttribute("name", "ad_file_title[]");
        text.setAttribute("placeholder", "File Title");


        // add the file and text to the div
        container.appendChild(file);
        container.appendChild(br);
        container.appendChild(text);

        //Append the div to the container div
        document.getElementById("media").appendChild(container);
      });
    });
  </script>

CSS代码

<style>
* {margin: 0; padding: 0; font-family: ubuntu;}    
body
{
  overflow: hidden;
  background-color: rgba(75,75,75);
  z-index: -10;
}
#media
{
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  background-color: rgba(30,30,30);
  float: left;
}
#media input[type="button"]
{
  width: 75px;
  height: 25px;
  top: 5px;
  left: 355px;
  position: absolute;
  color: orange;
  border-style: none;
  background-color: rgba(40,40,40);
  cursor: pointer;
}
#media input[type="button"]:hover
{
  background-color: rgba(50,50,50)
}
.new_container
{
  width: 250px;
  height: 250px;
  top: 0px;
  left: 0px;
  background-color: rgba(35,35,35);
  position: absolute;
  z-index: 1;
  border-radius: 10px;
  float: left;
}
.new_container input[type="file"]
{
  width: 90%;
  height: 25px;
  transform: translate(-50%, -50%);
  background-color: orange;
  border-style: none;
  position: absolute;
  top: 0px;
  left: 50%;
  margin: 0px;
  padding: 0px;
  z-index: 2;
}
.new_container input[type="text"]
{
  width: calc(90% - 10px);
  height: 25px;
  background-color: rgba(35,35,35);
  border-style: none;
  transform: translate(-50%, -50%);
  border: solid 1px rgba(255,255,255,.5);
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  position: relative;
  top: 150px;
  left: 50%;
  margin: 0px;
  padding: 0px;
  z-index: 2;
}
</style>

。。

</html>

        window.addEventListener("load", function()
        {
          document.getElementById("add").addEventListener("click", function()
          {
            // Create a div
            var container = document.createElement("div");
            container.setAttribute("class", "new_container[]");

            // Create a file input
            var file = document.createElement("input");
            file.setAttribute("type", "file");
            file.setAttribute("name", "sel_ad_file[]");

            // Create a break
            var br = document.createElement("br");

            // Create a text input
            var text = document.createElement("input");
            text.setAttribute("type", "text");
            text.setAttribute("name", "ad_file_title[]");
            text.setAttribute("placeholder", "File Title");


            // add the file and text to the div
            container.appendChild(file);
            container.appendChild(br);
            container.appendChild(text);

            //Append the div to the container div
            document.getElementById("media").appendChild(container);
          });
        });

    * {margin: 0; padding: 0; font-family: ubuntu;}
    /*----------------------------------------------------------------------------*/
    body
    {
      overflow: hidden;
      background-color: rgba(75,75,75);
      z-index: -10;
   }
    /*============================================================================*/
    #media
    {
      width: 350px;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
      background-color: rgba(30,30,30);
      float: left;
    }
    #media input[type="button"]
    {
      width: 75px;
      height: 25px;
      top: 5px;
      left: 355px;
      position: absolute;
      color: orange;
      border-style: none;
      background-color: rgba(40,40,40);
      cursor: pointer;

    }
    #media input[type="button"]:hover
    {
      background-color: rgba(50,50,50)
    }
    .new_container
    {
      width: 250px;
      height: 250px;
      top: 0px;
      left: 0px;
      background-color: rgba(35,35,35);
      position: absolute;
      z-index: 1;
      border-radius: 10px;
      float: left;
    }
    .new_container input[type="file"]
    {
      width: 90%;
      height: 25px;
      transform: translate(-50%, -50%);
      background-color: orange;
      border-style: none;
      position: absolute;
      top: 0px;
      left: 50%;
      margin: 0px;
      padding: 0px;
      z-index: 2;
    }
    .new_container input[type="text"]
    {
      width: calc(90% - 10px);
      height: 25px;
      background-color: rgba(35,35,35);
      border-style: none;
      transform: translate(-50%, -50%);
      border: solid 1px rgba(255,255,255,.5);
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      position: relative;
      top: 150px;
      left: 50%;
      margin: 0px;
      padding: 0px;
      z-index: 2;
    }

    <html>
      <head>
        <title>TEST1</title>
  	    <meta charset="UTF-8"/>
      </head>

      <body>

        <div id="media">
          <form>
            <div>
              <div id="container">&nbsp;</div>
              <input type="button" value="add" id="add" />
            </div>
          </form>
        </div>


      </body>
    </html>

Answer 1

您的问题是div的类与为其指定的css类不匹配。

从[]参数中的字符串中删除setAttribute，可以为div设置适当的样式。

从position:absolute;中移除.newcontainer及其子元素的css可以防止它们（大部分）相互堆叠。

然后，从文件输入中删除transform: translate(-50%, -50%);使其完全可见，而不是将其一半隐藏在屏幕左侧。

进行这些编辑后，div及其输入非常清晰可见。

然后我从正文css中删除了overflow: hidden;，以便当创建的div太多而无法容纳在屏幕/框架上时，您可以看到它们并确认它们都在那里。

window.addEventListener("load", function()
        {
          document.getElementById("add").addEventListener("click", function()
          {
            // Create a div
            var container = document.createElement("div");
            container.setAttribute("class", "new_container");

            // Create a file input
            var file = document.createElement("input");
            file.setAttribute("type", "file");
            file.setAttribute("name", "sel_ad_file");

            // Create a break
            var br = document.createElement("br");

            // Create a text input
            var text = document.createElement("input");
            text.setAttribute("type", "text");
            text.setAttribute("name", "ad_file_title");
            text.setAttribute("placeholder", "File Title");


            // add the file and text to the div
            container.appendChild(file);
            container.appendChild(br);
            container.appendChild(text);

            //Append the div to the container div
            document.getElementById("media").appendChild(container);
          });
        });

* {margin: 0; padding: 0; font-family: ubuntu;}
    /*----------------------------------------------------------------------------*/
    body
    {
      background-color: rgba(75,75,75);
      z-index: -10;
   }
    /*============================================================================*/
    #media
    {
      width: 350px;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
      background-color: rgba(30,30,30);
      float: left;
    }
    #media input[type="button"]
    {
      width: 75px;
      height: 25px;
      top: 5px;
      left: 355px;
      position: absolute;
      color: orange;
      border-style: none;
      background-color: rgba(40,40,40);
      cursor: pointer;

    }
    #media input[type="button"]:hover
    {
      background-color: rgba(50,50,50)
    }
    .new_container
    {
      width: 250px;
      height: 250px;
      top: 0px;
      left: 0px;
      background-color: rgba(35,35,35);
      z-index: 1;
      border-radius: 10px;
      float: left;
    }
    .new_container input[type="file"]
    {
      width: 90%;
      height: 25px;
      background-color: orange;
      border-style: none;
      top: 0px;
      left: 50%;
      margin: 0px;
      padding: 0px;
      z-index: 2;
    }
    .new_container input[type="text"]
    {
      width: calc(90% - 10px);
      height: 25px;
      background-color: rgba(35,35,35);
      border-style: none;
      transform: translate(-50%, -50%);
      border: solid 1px rgba(255,255,255,.5);
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      position: relative;
      top: 150px;
      left: 50%;
      margin: 0px;
      padding: 0px;
      z-index: 2;
    }

<html>
      <head>
        <title>TEST1</title>
  	    <meta charset="UTF-8"/>
      </head>

      <body>

        <div id="media">
          <form>
            <div>
              <div id="container">&nbsp;</div>
              <input type="button" value="add" id="add" />
            </div>
          </form>
        </div>


      </body>
    </html>

通过JavaScript在div中添加元素的问题

1 个答案: