javascript -新行显示

Javascript-new line display

本文关键字：显示 新行 javascript      更新时间：2023-09-26
<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>

执行此代码后，我得到文件上传按钮在同一行。如何逐行显示按钮?

添加一个换行符，<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);
}

有几种方法可以控制这一点。其中之一是添加一个换行字符<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，就像你为type做的那样，用

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

基本上，一个<br>将完全工作，让它到一个新的行，但如果你想得到花式和使用css display:block/float:right和移动<br>周围的东西可能不提供你正在寻找的灵活性。如果不是，给这个元素一个id，然后使用一些CSS!

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

相关文章：