【发布时间】：2015-06-11 07:59:32
【问题描述】：
我希望在 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
【问题讨论】：
-
你在这里混合了一些概念。 CSS“内”没有元素，只有关于文档显示的规则。如果没有应用此规则，则规则目标（“css 选择器”）指定不正确。 （提示：# 用于在 CSS 中指定目标 id）
-
“在 CSS 之外”？没有这样的东西......
-
@doldt 即使我在 css 中添加元素，结果仍然相同
-
@AlexMaina，正如我所说，您不能向 css 添加元素。只有选择器会匹配某些元素。
-
我已经编辑了上面的css并包含了id div @doldt
标签： javascript html css