Question

我对编码很陌生，无法找到我的错误。为什么这不起作用？它不会改变网站上的任何内容，并且在sublime上语法不正确。它应该在表单的末尾添加一个新的输入。这是语法的一部分。 #add是可访问的。不知道改变语法错误的内容是在线

var html =＆＃39; Antwoord ＆＃39 ;;}

    </head>
<body>
<!--navigatie -->

  <div class="container">
      <nav>
    <div class="row">
    <div class="col-md-4 studentdocent">
       <button type="button" class="btn btn-primary">Docent</button>
         <a href="student.php"><button type="button" class="btn btn-primary">Student</button> </a>
         </div>
    <div class="col-md-8">
         <h1 class="head"> Meerkeuzevragen</h1>
     </div>
    </div>
  </div>
</nav>



<form action="jsonswitch.php" method="post">
<div class="container">


<!-- Oefening input -->
<div class="all">
<div id="toevoeg">
  <div class="row">
    <div class="col-md-12">
      <label>Naam van de oefening</label>
      <div class="input-group">
        </div>
        <input type="text" id="tbox" class="form-control" name="oefening" placeholder="Naam van de oefening">
      </div>
    </div>
  </div>

<!-- vraag input -->

  <div class="row">
    <div class="col-md-12">
      <label>Zet hier je vraag neer</label>
      <div class="input-group">
        </div>
        <input type="text" id="tbox" class="form-control" name="vraag" placeholder="Voer hier je vraag in..">
      </div>
    </div>



<!-- antwoord input -->

  <div class="row">
    <div class="col-md-12">
      <label>Antwoord A</label>
      <div class="input-group">
        <div class="input-group-addon">
          <input type="checkbox" name="checkbox1">
        </div>
        <input type="text" id="tbox" class="form-control" name="antwoorda" placeholder="Zet hier antwoord a neer...">
      </div>
    </div>
  </div>




  <div class="row">
    <div class="col-md-12">
      <label>Antwoord B</label>
      <div class="input-group">
        <div class="input-group-addon">
          <input type="checkbox" name="checkbox2">
        </div>
        <input type="text" id="tbox" class="form-control" name="antwoordb" placeholder="Zet hier antwoord b neer...">
      </div>
    </div>
  </div>




  <div class="row">
    <div class="col-md-12">
      <label>Antwoord C</label>
      <div class="input-group">
        <div class="input-group-addon">
          <input type="checkbox" name="checkbox3">
        </div>
        <input type="text" id="tbox" class="form-control" name="antwoordc" placeholder="Zet hier antwoord c neer...">
      </div>
    </div>
  </div>




  <div class="row">
    <div class="col-md-12">
      <label>Antwoord D</label>
      <div class="input-group">
        <div class="input-group-addon">
          <input type="checkbox" name="checkbox4">
        </div>
        <input type="text" id="tbox" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer...">
      </div>
    </div>
  </div>
</div>








<!-- Verstuur button  -->
  <div class="col-md-4">
<button class="upload btn btn-info fa fa-upload" type="submit"></button>

<button class="upload btn btn-success fa fa-plus" id="add"></button>

<button class="upload btn btn-danger fa fa-minus" id="remove"></button>
  </div>
</div>
</div>
</div>
</form>

$(document).ready(function(e){
//variabelen
var html = '<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"> <div class="input-group-addon"> <input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."> </div> </div> </div>
</div> '/;

//input toevoegen
$("#add").click(function(e){
  $("#all").append(html);
});

Answer 1

请尝试以下方法：

＆＃13;

$(document).ready(function(e) {

  var html = '<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"> <div class="input-group-addon"> <input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."></div></div></div></div>';

  $("#add").click(function(e) {
    $("#all").append(html);
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="add" value="Add"></input>
<p>
  Html will be added after this ...
</p>
<div id="all"></div>

＆＃13;

我还在这里为您的查询创建了一个jsfiddle：https://jsfiddle.net/erLcrk9z/1/

Answer 2

为什么你在html变量的末尾加上'/'？请删除它。

还缺少关闭ready（）的大括号。

Answer 3

你添加了这个'/;，最后是斜线，你还有一个额外的</div>

此代码有效：

var html ='<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"><div class="input-group-addon"><input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."> </div></div></div>';

$("#add").click(function(e){
  $("#all").append(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add
</button>
<div id="all">
</div>

Answer 4

您的变量html未正确设置，并且您的代码未正确结束：

上一个div之前的换行符存在问题（字符串中没有换行符）
/与;
缺少ready()的大括号。

⋅ ⋅ ⋅

这是一个工作片段：

$(document).ready(function(e) {
  //variabelen
  var html = '<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"> <div class="input-group-addon"> <input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."> </div> </div> </div> </div>';

  //input toevoegen
  $("#add").click(function(e) {
    $("#all").append(html);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="all"></div>

Javascript添加输入

4 个答案: