有人称之为魔法——使物体突然出现的能力。您可以使用几行 JavaScript 在您的网站上创建这种魔法。例如，文本框是学习使对象动态显示时使用的良好 HTML 元素。设计网页时，与其在代码中构建代码，不如根据需要添加文本框并同时给站点访问者留下深刻的印象。
文字框创建
在使文本框实现之前，您必须了解什么是文本框。 HTML知道它是一个输入标签，如以下示例所示：
这个输入标签创建了一个具有两个重要属性的文本框； ID和类型。类型属性（其值为“文本”）告诉浏览器创建文本框，而不是其他类型的控件（例如按钮）。如果以后需要操纵文本框，则id属性（可选）可以派上用场。值选项也是可选的，它包含您希望在网页打开时在文本框中看到的值。
动态文字框
只要定义了元素的属性，HTML就不会在乎。这意味着您可以动态创建文本框元素并随时设置其属性。 document.createElement 函数使这成为可能，如下所示：
var box = document.createElement（“ input”）;
这就是创建HTML输入元素并将其分配给名为“ box”的变量所要做的全部工作。框对象不会成为文本框，直到您为其 type 属性赋予“文本”值，如本示例所示：
box.type =“文字”;
网页整合
下面的代码使用有用的appendChild函数将文本框附加到HTML文档：
document.body.appendChild（box）;
如果要在特定控件后附加文本框，请使用以下语句：
document.getElementById（“ some_Element_ID”）。appendChild（box）;
将“some_Element_ID”替换为要在其后附加文本框的元素的名称。例如，如果该元素是 ID 为“button1”的按钮，则 appendChild 语句将如下所示：
document.getElementById("button1").appendChild(box);
可选属性
使用此代码，新的文本框将完美运行。只需创建一个包含该语句的JavaScript函数，并在需要文本框时调用它即可。但是，您也可以按如下方式设置文本框的值和 ID 属性：
box.value = boxValue; box.id = boxID;
将 boxValue 和 boxID 的值传递给函数，并将这些属性应用于文本框。如果分配ID值，则可以稍后使用它来更新文本框的属性，如下例所示：
var boxObject = document.getElementById（boxID）; boxObject.style.backgroundColor = "红色";
第一条语句获取对文本框的引用，最后一条语句将文本框的背景色更改为红色。
