jQuery append function giving syntax error in 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>');

I'am trying to append html, but it's giving syntax error.

Answer 1

The problem is that you wrote the appending string in multiple lines. You can't do it like this, this is not valid JavaScript. You can write it in one line, or escape it correctly.

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

Or:

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