Question

我想通过jquery.append()方法在我的html中插入materialize.css代码，但它一直显示“意外的非法令牌”错误。 我很困惑，并认为这可能是由于转义序列字符或反斜杠..

$(".container").append("<div class='row'> 
 
    <div class='col s12 m12'> 
 
     <div class='card teal accent-1 hoverable' id='car'> 
 
     <div class='card-content center-align'> 
 
      <span class='card-title'>" + "Question" + page.id +"</span> 
 
      <form action='#'> 
 
      <p>"+page.question+"</p> 
 
      <p><input name='group1' type='radio' id='test1' /> 
 
       <label for='test1'>"+page.option[0]+"</label></p> 
 
      <p><input name='group1' type='radio' id='test2' /> 
 
       <label for='test2'>"+page.option[1]+"</label></p> 
 
      <p><input name='group1' type='radio' id='test3' /> 
 
       <label for='test3'>"+page.option[2]+"</label></p> 
 
      <p><input name='group1' type='radio' id='test4' /> 
 
       <label for='test4'>"+page.option[3]+"</label></p> 
 
      </form> 
 
      <h6 id='error1'>Please select an option</h6> 
 
     </div> 
 
     <div class='card-action center'> 
 
      <button class='btn' id='submit1'>Submit</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>");

我使用JSON对象，并使用page变量通过它迭代（JSON是可以正常使用）。 在此先感谢。

Answer 1

你不能追加使用append()功能这样的内容，你应该concate行：

$(".container").append("<div class='row'>"+ 
    "<div class='col s12 m12'>"+ 
     "<div class='card teal accent-1 hoverable' id='car'>"+ 
     "<div class='card-content center-align'>"+ 
      "<span class='card-title'>" + "Question" + page.id +"</span>"+ 
      "<form action='#'>"+ 
      "<p>"+page.question+"</p>"+ 
      "<p><input name='group1' type='radio' id='test1' />"+ 
       "<label for='test1'>"+page.option[0]+"</label></p>"+ 
      "<p><input name='group1' type='radio' id='test2' />"+ 
       "<label for='test2'>"+page.option[1]+"</label></p>"+ 
      "<p><input name='group1' type='radio' id='test3' />"+ 
       "<label for='test3'>"+page.option[2]+"</label></p>"+ 
      "<p><input name='group1' type='radio' id='test4' />"+ 
       "<label for='test4'>"+page.option[3]+"</label></p>"+ 
      "</form>"+ 
      "<h6 id='error1'>Please select an option</h6>"+ 
     "</div>"+ 
     "<div class='card-action center'>"+ 
      "<button class='btn' id='submit1'>Submit</button>"+ 
     "</div>"+ 
     "</div>"+ 
    "</div>"+ 
"</div>"); 

希望这有助于。

Answer 2

$(".container").append(`<div class='row'> 
 
    <div class='col s12 m12'> 
 
     <div class='card teal accent-1 hoverable' id='car'> 
 
     <div class='card-content center-align'> 
 
      <span class='card-title'>Question${page.id}</span> 
 
      <form action='#'> 
 
      <p>"+page.question+"</p> 
 
      <p><input name='group1' type='radio' id='test1' /> 
 
       <label for='test1'>${page.option[0]}</label></p> 
 
      <p><input name='group1' type='radio' id='test2' /> 
 
       <label for='test2'>${page.option[1]}</label></p> 
 
      <p><input name='group1' type='radio' id='test3' /> 
 
       <label for='test3'>${page.option[2]}</label></p> 
 
      <p><input name='group1' type='radio' id='test4' /> 
 
       <label for='test4'>${page.option[3]}</label></p> 
 
      </form> 
 
      <h6 id='error1'>Please select an option</h6> 
 
     </div> 
 
     <div class='card-action center'> 
 
      <button class='btn' id='submit1'>Submit</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>`);

<script 
 
    src="https://code.jquery.com/jquery-3.2.1.js" 
 
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
    crossorigin="anonymous"></script> 
 
<div class="container"> 
 
</div>

尝试改变"" =>``

在你的代码.. $(".container").append("<div class='row'> .. </div>");

应该 $(".container").append(.. </div>);

Answer 3

意外的非法令牌？

您需要concat HTML的每一行+和需要引用它double quote

$(".container").append("<div class='row'>"+ 
    "<div class='col s12 m12'>"+ 
....... 
    "</div>"+ 
    "</div>"); 

Answer 4

在这里，你去了一个解决方案

$(".container").append(`<div class='row'> 
 
    <div class='col s12 m12'> 
 
     <div class='card teal accent-1 hoverable' id='car'> 
 
     <div class='card-content center-align'> 
 
      <span class='card-title'>Question ${page.id}</span> 
 
      <form action='#'> 
 
      <p>"+page.question+"</p> 
 
      <p><input name='group1' type='radio' id='test1' /> 
 
       <label for='test1'>${page.option[0]}</label></p> 
 
      <p><input name='group1' type='radio' id='test2' /> 
 
       <label for='test2'>${page.option[1]}</label></p> 
 
      <p><input name='group1' type='radio' id='test3' /> 
 
       <label for='test3'>${page.option[2]}</label></p> 
 
      <p><input name='group1' type='radio' id='test4' /> 
 
       <label for='test4'>${page.option[3]}</label></p> 
 
      </form> 
 
      <h6 id='error1'>Please select an option</h6> 
 
     </div> 
 
     <div class='card-action center'> 
 
      <button class='btn' id='submit1'>Submit</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>`);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"></div>

研究所使用double quotes“”请使用backtick``。您可以使用${}。

${variable_name}用您的变量名替换variable_name。

希望这会有所帮助。