Javascript 追加新表单并在输入中有文本时提交

我想在单击“创建”按钮时追加填写表单，并填写输入文本以将文本追加到结果分区中。我想使用提交输入触发输入的完整性，并在结果分区中显示文本时隐藏表单。但是，我发现我无法显示文本和隐藏表单。我想知道为什么我不能那样做

代码如下：

html:

创建组

javascript:

var create = document.getElementById('create-group');
  create.addEventListener('click',function(e){
     addForm();
});

function addForm(){
  var form1 = $('<input type="text" id="form1">');
  var form2 = $('<input type="submit" id="form2">');

  $('#results').append("<div id='allForm'>")
  .append(form1)
  .append(form2)
  .append("</div>");
  createGroup();
}

function createGroup(){
  var form=document.getElementById('allForm');
  form.on('submit',function(e){
  e.preventDefault();
  var item = $('#form1').val();
  if(item){
    $('#results').append("<ul>")
    .append(item)
    .append("</ul>");
    form.remove();
  }
  else{
    alert("Input a name!");
  }
});
}

var create=document.getElementById（'create-group'）；
create.addEventListener（'click'，函数（e）{
addForm（）；
});
函数addForm（）{
var form1=$（''）；
var form2=$（''）；
$（“#结果”）。追加（“”）
.附加（表格1）
.附加（表格2）
.附加（“”）；
createGroup（）；
}
函数createGroup（）{
var form=document.getElementById（'allForm'）；
表格（‘提交’）功能（e）{
e、 预防默认值（）；
var item=$（'#form1'）.val（）；
如果（项目）{
$（“#结果”）。追加（
）
.附加（项目）
.附加（“
”）；
form.remove（）；
}
否则{
警报（“输入名称！”）；
}
});
}

我对您的代码做了一些修改，但以下是一些有效的方法：

html:

<button type="button" id="create-group">Create Group</button>

<div id="results">

    <script id="results-template" type="text/x-handlebars-template">

        <h1>{{someResult}}</h1>

    </script>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>

<script src="test.js"></script>

$(document).ready(function() {

var create = $('#create-group');

create.click(function() {

    addForm();

});

});

function addForm(){

  var form1 = $('<input type="text" id="form1">');
  var form2 = $('<input type="submit" id="form2">');

  $('#results').append("<div id='allForm'>")
  .append(form1)
  .append(form2)
  .append("</div>");
  createGroup();

}

function createGroup(){

  var submit = $('#form2');

  submit.click(function() {

    showResult();

  });

}

function showResult() {

  var source = $("#results-template").html();

  //compile returns a function
  var template = Handlebars.compile(source);

  //provide an object with values
  var context = {

      someResult: $('#form1').val()
  }

  var html = template(context);
  form1.remove();
  form2.remove();
  $('body').append(html);

}

创建组
{{someResult}}

js:

<button type="button" id="create-group">Create Group</button>

<div id="results">

    <script id="results-template" type="text/x-handlebars-template">

        <h1>{{someResult}}</h1>

    </script>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>

<script src="test.js"></script>

$(document).ready(function() {

var create = $('#create-group');

create.click(function() {

    addForm();

});

});

function addForm(){

  var form1 = $('<input type="text" id="form1">');
  var form2 = $('<input type="submit" id="form2">');

  $('#results').append("<div id='allForm'>")
  .append(form1)
  .append(form2)
  .append("</div>");
  createGroup();

}

function createGroup(){

  var submit = $('#form2');

  submit.click(function() {

    showResult();

  });

}

function showResult() {

  var source = $("#results-template").html();

  //compile returns a function
  var template = Handlebars.compile(source);

  //provide an object with values
  var context = {

      someResult: $('#form1').val()
  }

  var html = template(context);
  form1.remove();
  form2.remove();
  $('body').append(html);

}

$（文档）.ready（函数（）{
var create=$（“#创建组”）；
创建。单击（函数（）{
addForm（）；
});
});
函数addForm（）{
var form1=$（''）；
var form2=$（''）；
$（“#结果”）。追加（“”）
.附加（表格1）
.附加（表格2）
.附加（“”）；
createGroup（）；
}
函数createGroup（）{
var submit=$（“#form2”）；
提交。单击（函数（）{
showResult（）；
});
}
函数showResult（）{
var source=$（“#结果模板”）.html（）；
//compile返回一个函数
var template=handlebar.compile（源代码）；
//为对象提供值
变量上下文={
someResult:$（'#form1'）.val（）
}
var html=模板（上下文）；
形式1.删除（）；
形式2.删除（）；
$（'body'）.append（html）；
}

我正在使用handlebar.js获取输入值，隐藏表单，并将其显示到results div中。这可能不是最必要的工具，但我认为它可能有用

以下是一个工作示例：