通过JavaScript插入HTML

我正在尝试只使用JavaScript在我的网页中插入一个“免费绘图框”。我已经能够让我的“免费绘制框脚本”在HTML存在的情况下在页面上工作，但我希望通过JavaScript插入HTML来实现这一点。我已经包括了我的整个代码的一个片段，但是，我相信有问题的代码是朝底部的-注释为“插入HTML”。我的错误在哪里

/*自由绘制框脚本*/
变量画布，ctx，标志=false，
prevX=0，
currX=0，
prevY=0，
咖喱=0，
dot_标志=假；
var x=“黑色”，
y=2；
函数init（）{
canvas=document.getElementById（'can'）；
ctx=canvas.getContext（“2d”）；
w=画布宽度；
h=画布高度；
canvas.addEventListener（“mousemove”，函数（e）{
findxy（'move'，e）
}，假）；
canvas.addEventListener（“鼠标向下”，函数（e）{
findxy（'down'，e）
}，假）；
canvas.addEventListener（“mouseup”，函数（e）{
findxy（'up'，e）
}，假）；
canvas.addEventListener（“mouseout”，函数（e）{
findxy（'out'，e）
}，假）；
}
函数绘图（）{
ctx.beginPath（）；
ctx.moveTo（prevX，prevY）；
ctx.lineTo（咖喱，咖喱）；
ctx.strokeStyle=x；
ctx.lineWidth=y；
ctx.stroke（）；
ctx.closePath（）；
}
函数擦除（）{
var m=确认（“您确定要清除签名吗？”）；
如果（m）{
ctx.clearRect（0，0，w，h）；
document.getElementById（“canvasimg”）.style.display=“无”；
}
}
函数save（）{
document.getElementById（“canvasimg”）.style.border=“2px solid”；
var dataURL=canvas.toDataURL（）；
document.getElementById（“canvasimg”）.src=dataURL；
document.getElementById（“canvasimg”）.style.display=“inline”；
}
函数findxy（res，e）{
如果（res=='down'）{
prevX=currX；
prevY=咖喱；
currX=e.clientX-canvas.offsetLeft；
currY=e.clientY-canvas.offsetTop；
flag=true；
dot_flag=true；
if（dot_标志）{
ctx.beginPath（）；
ctx.fillStyle=x；
ctx.fillRect（currX，currY，2,2）；
ctx.closePath（）；
dot_标志=假；
}
}
如果（res==“向上”| res==“向外”）{
flag=false；
}
如果（res=='move'）{
国际单项体育联合会（旗）{
prevX=currX；
prevY=咖喱；
currX=e.clientX-canvas.offsetLeft；
currY=e.clientY-canvas.offsetTop；
draw（）；
}
}
}
/*插入HTML*/
document.body.innerHTML+='
';

/*自由绘制框脚本*/
变量画布，ctx，标志=false，
prevX=0，
currX=0，
prevY=0，
咖喱=0，
dot_标志=假；
var x=“黑色”，
y=2；
函数init（）{
canvas=document.getElementById（'can'）；
ctx=canvas.getContext（“2d”）；
w=画布宽度；
h=画布高度；
canvas.addEventListener（“mousemove”，函数（e）{
findxy（'move'，e）
}，假）；
canvas.addEventListener（“鼠标向下”，函数（e）{
findxy（'down'，e）
}，假）；
canvas.addEventListener（“mouseup”，函数（e）{
findxy（'up'，e）
}，假）；
canvas.addEventListener（“mouseout”，函数（e）{
findxy（'out'，e）
}，假）；
}
函数绘图（）{
ctx.beginPath（）；
ctx.moveTo（prevX，prevY）；
ctx.lineTo（咖喱，咖喱）；
ctx.strokeStyle=x；
ctx.lineWidth=y；
ctx.stroke（）；
ctx.closePath（）；
}
函数擦除（）{
var m=确认（“您确定要清除签名吗？”）；
如果（m）{
ctx.clearRect（0，0，w，h）；
document.getElementById（“canvasimg”）.style.display=“无”；
}
}
函数save（）{
document.getElementById（“canvasimg”）.style.border=“2px solid”；
var dataURL=canvas.toDataURL（）；
document.getElementById（“canvasimg”）.src=dataURL；
document.getElementById（“canvasimg”）.style.display=“inline”；
}
函数findxy（res，e）{
如果（res=='down'）{
prevX=currX；
prevY=咖喱；
currX=e.clientX-canvas.offsetLeft；
currY=e.clientY-canvas.offsetTop；
flag=true；
dot_flag=true；
if（dot_标志）{
ctx.beginPath（）；
ctx.fillStyle=x；
ctx.fillRect（currX，currY，2,2）；
ctx.closePath（）；
dot_标志=假；
}
}
如果（res==“向上”| res==“向外”）{
flag=false；
}
如果（res=='move'）{
国际单项体育联合会（旗）{
prevX=currX；
prevY=咖喱；
currX=e.clientX-canvas.offsetLeft；
currY=e.clientY-canvas.offsetTop；
draw（）；
}
}
}
/*插入HTML*/
document.body.innerHTML+=`
`;

将实体添加到实体中不会起作用，其onload函数也不会被调用。相反，直接使用js创建DOM，然后将其添加到页面中。因此，要创建画布，您需要执行以下操作：

var can = document.createElement("canvas");
can.width = 800;
can.height = 200;
document.body.appendChild(can);

//you can use it directly
var ctx = can.getContext("2d");

---

我不建议使用JS输入html，但下面是修复方法：

用于t