Question

我希望在html表单上动态添加一个按钮，以便用户在填写表单时可以上传多个文件。 css设计既有弹性又有流畅性，目的是每当用户点击“添加文件”链接时，就会添加一个新按钮，允许用户浏览文件，添加文件并最终上传。按钮应出现在页面的主要内容区域，不应溢出页脚区域，应垂直呈现，每个按钮出现在换行符上。下面的代码正是如此。这个问题与this question非常相关，但与css（设计）要求有关。

    
        function myFunction() {
	var btn = document.createElement("BUTTON");
	var text = document.createTextNode("Browse..");
	btn.appendChild(text);
	var newbutton = document.getElementById("button"); //new div button   element introduced on html.
  	document.body.insertBefore(btn,newbutton);//insert before method
	
}

    /*Mailu*/
        div {
	    padding: 1px 0;
       }
        #header {
        	background: #DDDDDD;
        	
        }
    
        #footer {
        	clear: both;
        	background: #DDDDDD;
        }
    /*add css as suggested here https://stackoverflow.com/a/2038374/2941758*/
        button{display:block;}

    
        <!DOCTYPE html>
        <html>
        <body>
        <link href="button.css" rel="stylesheet" type="text/css"/>
        <div id = "header">
        <p>Home</p>
        </div>
    
    
        <p>Upload file.</p>
        First name: <input type = "text" name = "Firstname"><p>
        <div id = "button"> <!--added div button on html-->
        <a href="javascript:void(0)" onclick= "myFunction()" > Add file</a>
        </div>
        <div id="footer"><p>footer</p>
    
        </div>
    
    
    
        </body>
        </html>

  [1]: https://stackoverflow.com/questions/29943352/dynamically-create-element-but-use-a-href-instead-of-a-button-onclick

Answer 1

替换：

#button {

使用：

button {

#是id选择器，这意味着它会将样式应用于具有id="button"的元素。

如果您遗漏#，它将匹配所有<button>元素。

使用HTML，CSS和Javascript动态创建HTML按钮

1 个答案: