在jQuery中附加HTML时转义JS中的字符

Question

I have a HTML Canvas in which I want to append couple of html canvas.

 <div>
        <canvas id="BackGroundImage" width="800" height="300"
    style="position: absolute; z-index: 0;"></canvas>
        <canvas id="canvas" width="800" height="300"
    style="position: absolute;  z-index: 1;"></canvas>
        </div> '

Like this.

append(''<div>\
            <canvas id="BackGroundImage" width="800" height="300"\
        style="position: absolute; z-index: 0;"></canvas>\
            <canvas id="canvas" width="800" height="300"\
        style="position: absolute;  z-index: 1;"></canvas\>
            </div>'');

But this doesnt work the sapces after canvas give me error saying unterminated statements .

Answer 1

Use like this

append('<div>'+
            '<canvas id="BackGroundImage" width="800" height="300"'+
        'style="position: absolute; z-index: 0;"></canvas>'+
            '<canvas id="canvas" width="800" height="300"'+
        'style="position: absolute;  z-index: 1;"></canvas\>'+
            '</div>');

Answer 2

try this

append('<div>'+
'<canvas id="BackGroundImage" width="800" height="300"'+
' style="position: absolute; z-index: 0;"></canvas>'+
'<canvas id="canvas" width="800" height="300"'
+' style="position: absolute;  z-index: 1;"></canvas\> </div>');

Answer 3

Try this.

issue 1: append(' ' // string is not properly created.

issue 2 : </canvas\\>

 $("body").append('<div> I am added, inspect me in dev console and found the desired html\\ <canvas id="BackGroundImage" width="800" height="300"\\ style="position: absolute; z-index: 0;"></canvas>\\ <canvas id="canvas" width="800" height="300"\\ style="position: absolute; z-index: 1;"></canvas>\\ </div>'); 

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

Answer 4

You are almost right, but the problem is you used / instead of + , some other people make problems by adding ' inside '' or " inside ""

 $('.here').append('<div>' + '<canvas id="BackGroundImage" width="800" height="300"' + 'style="position: absolute; z-index: 0;"></canvas>' + '<canvas id="canvas" width="800" height="300"' + 'style="position: absolute; z-index: 1;"></canvas\\>' + '</div>'+ '<h1>Added</h1>'); 

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