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

Question

I'm working on a upload formula, where the user can click on a "add" button, a "select file button" and a "title field" will show up then. 我正在处理一个上传公式，用户可以单击“添加”按钮，然后显示“选择文件按钮”和“标题字段”。

If the user clicks again on the "add button", a new button and field show up and so on and so forth. 如果用户再次单击“添加按钮”，则会显示一个新的按钮和字段，依此类推。

My problem: I need those elements in a div, to be able to style and change them a bit. 我的问题：我需要div中的那些元素，以便能够对其进行样式设置和更改。

Adding the elements do work but for a reason, adding a div doesn't work, and haven't figured out, what do to. 添加元素确实有效，但是出于某种原因，添加div不起作用，也没有弄清楚该怎么做。

Here is my code: 这是我的代码：

<!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 Code 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 Code 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

Your problem is that the div's class doesn't match the css class meant for it. 您的问题是div的类与为其指定的css类不匹配。

Removing [] from the strings in your setAttribute parameters, allows for the divs to be styled appropriately. 从setAttribute参数中的字符串中删除[] ，可以为div设置适当的样式。

Removing the position:absolute; 移开position:absolute; from the .newcontainer and its children's css prevents them from (mostly) stacking on top of each other. 来自.newcontainer及其子级css的代码阻止了它们（大部分）彼此堆叠。

Then, removing the transform: translate(-50%, -50%); 然后，删除transform: translate(-50%, -50%); from the file input allows them to be completely visible instead of half of them being hidden on the left side of the screen. 从文件输入中可以使它们完全可见，而不是将它们的一半隐藏在屏幕的左侧。

After these edits, the divs and their inputs are pretty plainly visible. 完成这些编辑后，div及其输入便清晰可见。

I then removed overflow: hidden; 然后我删除了overflow: hidden; from body css, so that when too many divs are created to fit on the screen/frame, you can see them and confirm that they are all there. 从body CSS中获取，以便当创建的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 个解决方案

解决方案1
1 2018-10-02 16:16:04

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

问题描述

1 个解决方案

解决方案1 1 2018-10-02 16:16:04

解决方案1
1 2018-10-02 16:16:04