Question

我是javascript的新手，只是想学习动态使用它的基础知识，而不是通过html文件。

我试图在js上动态创建表单，所以我在我的html文件中有这个：

<html>
    <head>
        <title>new Form</title>
        <LINK rel="stylesheet" type="text/css" href='Formstyle.css'></LINK>
    </head>
    <body>
        <script src='form.js'></script>
    </body>
</html>

在我的js文件中我有这个

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

var i = document.createElement("input");
i.type = "text";
i.name = "user_name";

但由于某些原因我在Chrome中运行该文件，但我什么都没得到。

Answer 1

您创建了表单，但您从未将其添加到DOM中（就此而言，您从未将输入添加到表单中。）

使用appendChild（或insertBefore等）。

Answer 2

您需要将元素添加到文档中

类似于document.body.insertBefore

Answer 3

首先，您应该弄清楚您希望表单在哪个页面上。假设您要将输入字段或表单附加到“表单”元素。

要做到这一点，你必须像对方那样说，并将动态创建的html附加到你的DOM。

我为你做了一个codepen，它在click按钮上添加了一个输入字段： http://codepen.io/alexG53090/pen/VeLpjd

HTML:
<div id='container'></div>
<button id='button'>click it</button>

JS:
var form = document.createElement('input');
var parent = document.getElementById('container');
container.appendChild(form);

无法看到我创建动态javascript的表单

3 个答案: