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对象并使用页面变量迭代它。（JSON工作正常）。提前谢谢。

Answer 1

你不能用这种方式使用append()函数追加内容，你应该连接这些行：

$(".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

＆＃13;

  $(".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>`);

＆＃13;

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

＆＃13;

尝试更改"" =＆gt; ``

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

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

Answer 3

意外的非法令牌？

您需要concat每行h +，并且需要在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}将变量名替换为变量名。

希望这会有所帮助。

jQuery append（）方法显示Unexpexcted Illegeal令牌错误？

4 个答案: