如何动态创建 \<input type="text"\>

在前端开发中，有时候需要动态地创建 HTML 元素。本文将介绍如何使用 JavaScript 动态地创建一个输入框元素。

步骤

1. 创建一个空的文本输入框元素。

   const inputElement = document.createElement("input");

2. 设置输入框的类型为文本。

   inputElement.type = "text";

3. 添加元素到 DOM 树中。

   document.body.appendChild(inputElement);

4. 可选：设置输入框的属性和样式。

   inputElement.placeholder = "请输入文本";
   inputElement.style.marginTop = "10px";

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ------------------------
  -------
  ------
    ------- ---------------------------------------------
    --------
      -------- -------------------- -
        ----- ------------ - --------------------------------
        ----------------- - -------
        ------------------------ - --------
        ---------------------------- - -------
        ----------------------------------------
      -
    ---------
  -------
-------

点击页面上的“创建输入框”按钮，就会动态地创建一个带有提示信息的文本输入框。

总结

通过本文所介绍的方法，我们可以动态地创建一个输入框元素并添加到页面中。在实际开发中，我们可以根据需求动态地创建不同类型的 HTML 元素，从而方便地实现页面布局和交互效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15475