Javascript 动态创建表单

我面临一个问题。我有一个生成表单的javascript函数（使用函数

append（）

）。我基本上是在尝试创建一个带有提交按钮的表单，当按下这个按钮时，会调用一个php函数，负责做一些事情。但是，它不工作，当我按下提交按钮时，什么也没有发生

不过，我知道这段代码实际上是有效的，因为我在一个空项目上运行它，并且没有使用函数

append（）

我的一些问题是：使用

append（）

动态生成表单是否会阻止调用我的php文件？如果是这样的话，有没有办法让它发挥作用？如果没有，你知道为什么它不起作用，以及如何用另一种方法来做吗

以下是javascript代码：

function create_user() {
  var id = document.getElementById("right-well");
  $(id).empty().append("<h1 class='title'>Users</h1>");
  $(id).append("<div class='line-title'></div>");
  $(id).append("<div class='add-user'>Add User</div>");
  $(id).append("<form action='../upload.php' method='post' enctype='multipart/form-data'>");
  $(id).append("<h4 class='user-name-text'> Name :</h4>");
  $(id).append("<h4 class='user-mail-text'> E-mail :</h4>");
  $(id).append("<h4 class='user-status-text'> Status :</h4>");
  $(id).append("<h4 class='user-picture-text'> Picture :</h4>");
  $(id).append("<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>")
  $(id).append("<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>")
  $(id).append("<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>")
  $(id).append("<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>")
  $(id).append("<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>")
  $(id).append("</form>")
}  

函数创建用户（）{
var id=document.getElementById（“右井”）；
$（id）.empty（）.append（“用户”）；
$（id）。追加（“”）；
$（id）.追加（“添加用户”）；
$（id）。追加（“”）；
$（id）.附加（“名称：”）；
$（id）.附加（“电子邮件：”）；
$（id）.附加（“状态：”）；
$（id）.附加（“图片：”）；
$（id）.附加（“”）
$（id）.附加（“”）
$（id）.附加（“”）
$（id）.附加（“”）
$（id）.附加（“保存”）
$（id）.附加（“”）
}  

---

PS:php文件只包含一个

echo“lol”，用于测试。
这里的问题是，在
表单
元素之后附加的元素被视为
表单
的同级元素，而不是子元素。以下是一个解决方法：

function create_user() {
  var id = document.getElementById("right-well");
  $(id).empty().append("<h1 class='title'>Users</h1>");
  $(id).append("<div class='line-title'></div>");
  $(id).append("<div class='add-user'>Add User</div>");
  $(id).append("<form action='../upload.php' method='post' enctype='multipart/form-data'></form>");

  var form = $(id).find("form");

  $(form).append("<h4 class='user-name-text'> Name :</h4>");
  $(form).append("<h4 class='user-mail-text'> E-mail :</h4>");
  $(form).append("<h4 class='user-status-text'> Status :</h4>");
  $(form).append("<h4 class='user-picture-text'> Picture :</h4>");
  $(form).append("<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>")
  $(form).append("<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>")
  $(form).append("<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>")
  $(form).append("<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>")
  $(form).append("<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>")
}

函数创建用户（）{
var id=document.getElementById（“右井”）；
$（id）.empty（）.append（“用户”）；
$（id）。追加（“”）；
$（id）.追加（“添加用户”）；
$（id）。追加（“”）；
var form=$（id）.find（“form”）；
$（表格）。附加（“名称：”）；
$（表格）。附加（“电子邮件：”；
$（表格）。附加（“状态：”）；
$（表格）。附加（“图片：”；
$（表格）。附加（“”）
$（表格）。附加（“”）
$（表格）。附加（“”）
$（表格）。附加（“”）
$（表格）。追加（“保存”）
}
真正的问题是
append（）
方法如何将HTML附加到页面上的文档树中。如果在一次调用中附加了损坏或不完整的HTML，浏览器必须采取措施来修复它。例如，您在一次通话中追加开始标记，然后在最后一次通话中追加结束标记。这将创建一个不平衡的文档树。浏览器有两种选择：

自动关闭
标记
抛出错误，因为它正在尝试分析无效的HTML
相反，您希望对
append（）
进行1次调用，然后在此之前在JavaScript中连接字符串：

function create_user() {
  var $id = $("#right-well"),
      markup = [
        "<h1 class='title'>Users</h1>",
        "<div class='line-title'></div>",
        "<div class='add-user'>Add User</div>",
        "<form action='../upload.php' method='post' enctype='multipart/form-data'>",
          "<h4 class='user-name-text'> Name :</h4>",
          "<h4 class='user-mail-text'> E-mail :</h4>",
          "<h4 class='user-status-text'> Status :</h4>",
          "<h4 class='user-picture-text'> Picture :</h4>",
          "<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>",
          "<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>",
          "<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>",
          "<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>",
          "<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>",
        "</form>"
      ];

  $id.empty()
     .append(markup.join(""));
}

函数创建用户（）{
var$id=$（“#右井”），
标记=[
“用户”，
"",
“添加用户”，
"",
“姓名：”，
“电子邮件：”，
“地位：”，
“图片：”，
"",
"",
"",
"",
“保存”，
""
];
$id.empty（）
.append（markup.join（“”））；
}

现在浏览器可以解析格式正确的HTML

另一种方法是在
标记内使用客户端模板：

<script type="text/javascript">
    function create_user() {
      var $id = $("#right-well"),
          markup = document.getElementById("add-user-template").innerHTML;

      $id.empty()
         .append(markup);
    }
</script>

<script type="text/html" id="add-user-template">
  <h1 class='title'>Users</h1>
  <div class='line-title'></div>
  <div class='add-user'>Add User</div>
  <form action='../upload.php' method='post' enctype='multipart/form-data'>
    <h4 class='user-name-text'> Name :</h4>
    <h4 class='user-mail-text'> E-mail :</h4>
    <h4 class='user-status-text'> Status :</h4>
    <h4 class='user-picture-text'> Picture :</h4>
    <input class='user-name-input' id='new_user_name' placeholder='Name...'></input>
    <input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>
    <input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>
    <input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>
    <button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>
  </form>
</script>


函数create_user（）{
var$id=$（“#右井”），
markup=document.getElementById（“添加用户模板”）.innerHTML；
$id.empty（）
.附加（标记）；
}
使用者
添加用户
姓名：
电邮：
地位：
图片：
拯救
表单的创建方式无关紧要。它必须是有效的。你看起来很“有趣”。我建议您看看您使用浏览器开发控制台实际创建的html源代码……您了解AJAX吗？是的，我知道，我只想知道为什么，它不使用
append（）
，但不使用它。我想知道它是否相关。@arkascha我已经检查了控制台，但它没有说任何关于最终错误的内容。这不是我要问的。我提到了您创建的表单的结构。HTML源代码。