Question

<div id="upload"> 
    <input type="button"  onclick="uploadFile();" value="+">
    <script>
        function uploadFile() {
            var x = document.createElement("INPUT");
            x.setAttribute("type", "file");
            upload.appendChild(x);
        }
    </script>
</div>

执行此代码后，我在同一行获取文件上传按钮。如何逐行显示按钮？

Answer 1

只需添加换行符<br>：

function uploadFile() {
    var x = document.createElement("input");
    var br = document.createElement("br");
    x.setAttribute("type", "file");
    upload.appendChild(br); // (Make sure you add the `br` before the input)
    upload.appendChild(x);
}

Answer 2

有几种方法可以控制它。其中一个是添加一个换行符<br>，这将导致你的DOM看起来像：

<div id="upload"> 
    <input type="button" onclick="uploadFile();" value="+">
    <br>
    <input type="file"/>
</div>

你可以这样做：

<div id="upload"> 
  <input type="button" onclick="uploadFile();" value="+">
  <script>
    function uploadFile(){
      var br = document.createElement("br");
      var x = document.createElement("INPUT");
      x.setAttribute("type", "file");
      upload.appendChild(br);
      upload.appendChild(x);
    }
  </script>
</div>

很多定位都是在样式中完成的，在这种情况下，嵌套常见的是浮动左右和什么不是。假设您想将该按钮放在任何位置，您可以使用getElementById（）方法获取dom中具有id的任何其他元素，并在那里附加按钮。

http://www.w3schools.com/jsref/met_document_getelementbyid.asp

<div id="upload"> 
  <input type="button" onclick="uploadFile();" value="+">
  <script>
    function uploadFile(){
      parent_node = document.getElementById('upload');
      var x = document.createElement("INPUT");
      parent_node.appendChild(x);
    }
  </script>
</div>

这将导致您的DOM看起来像：

<div id="upload"> 
  <input type="button" onclick="uploadFile();" value="+">
  <input type="file"/>
</div>

（可能正是你现在拥有的），重点是，也许CSS是你想要定位输入元素的方式。你可以在javascript中提供一个id，就像你对类型一样，

x.setAttribute("id","some_unique_name")

基本上，<br>完全可以将其添加到新行中，但是如果您想获得幻想并使用css display:block / float:right并移动<br> {1}}可能无法提供您所需的灵活性。如果没有，请给元素id并查看一些CSS！

http://www.w3schools.com/css/css_positioning.asp

Javascript-新行显示

2 个答案: