在 JS 中转义字符，同时在 JQuery 中附加 HTML

Question

我有一个HTML画布，我想在其中附加几个html画布。

<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> '

喜欢这个。

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>'');

但这不起作用，画布后的 sapces 给我错误说unterminated statements.

Answer 1

试试这个。

问题 1：未正确创建 append(' '//字符串。

问题 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 2

像这样使用

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

试试这个

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 4

你几乎是对的，但问题是你用了/而不是+，其他一些人通过在''内部添加'或在""中添加"来制造问题

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