jQuery append関数がconsole.logに構文エラーを出す

Question

$(".trade-button").append('<div> 
<button tabindex="2" class="btn google-analytics-make-trade-click-trade-page"<span id="tradeTotal"></span> 
</button></div>'); 

私はappend htmlを試していますが、構文エラーです。

Answer 1

問題は、追加する文字列を複数行に記述していることです。このようにすることはできませんが、これは有効なJavaScriptではありません。 1行に書くか、正しくエスケープすることができます。

$(".trade-button").append('<div><button tabindex="2" class="btn google-analytics-make-trade-click-trade-page">Trade For a Total of $0<span id="tradeTotal"></span></button></div>');

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

または：

$(".trade-button").append('<div>' + 
 
          '<button tabindex="2" class="btn google-analytics-make-trade-click-trade-page">' + 
 
          'Trade For a Total of $0' + 
 
          '<span id="tradeTotal"></span>' + 
 
          '</button></div>');

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