Javascript 画布无法正确附加

对于当前代码，画布将附加在页面的末尾。 我正在尝试将id为“can”的画布从页面底部移动到id为“saletop”的div中

我曾尝试直接从sale_canvas函数中使用appendChild和append，但没有显示出来

functions.js

function sale_canvas() {

?>
    <script type="text/javascript">

        jQuery(document).ready(function( $ ) {              

                const width = 750;
                const height = 50;
                const centerY = height / 2;
                const amplitude = 0 ;
                const speed = 50;
                const degrees = 45;

                let startTime = 0;
                let previousTime = 0;
                let pausedTime = 0;
                let paused = false;
                let canvas, ctx;
                let charObjs;

                const start = () => {
                  canvas = document.createElement('canvas');            
                  canvas.width = width;
                  canvas.height = height;
                  canvas.id = 'can';
                  ctx = canvas.getContext('2d');

                  document.body.appendChild(canvas);
                  window.addEventListener('blur', () => {
                    if (!paused) {
                      paused = true;
                      pausedTime = Date.now() - startTime;
                    } 
                  });

             ** the rest of the code **

                };

                start();            

        });

    </script>
<?php

}
add_action('wp_head', 'sale_canvas');

function sale_replace() {

?>
    <script type="text/javascript">

        jQuery(document).ready(function( $ ) {              
            $("#can").appendTo("#saletop");
        });

    </script>
<?php

}
add_action('wp_head', 'sale_replace');

function sale_canvas（）{
?>
jQuery（文档）.ready（函数（$）{
常数宽度=750；
常数高度=50；
const centerY=高度/2；
常数振幅=0；
恒速=50；
常数度=45；
让startTime=0；
设previousTime=0；
设pausedTime=0；
让暂停=假；
让画布，ctx；
让查罗布斯；
常量开始=（）=>{
canvas=document.createElement（'canvas'）；
画布宽度=宽度；
canvas.height=高度；
canvas.id='can'；
ctx=canvas.getContext（'2d'）；
document.body.appendChild（画布）；
window.addEventListener（'blur'，（）=>{
如果（！暂停）{
暂停=真；
pausedTime=Date.now（）-startTime；
} 
});
**代码的其余部分**
};
start（）；
});
jQuery（文档）.ready（函数（$）{
$（“#can”）。追加（“#saletop”）；
});
我看不出有什么问题——做了一个测试，效果很好。
请注意，您可能希望将画布直接附加到div中。否，请先将画布附加到主体中

但您的代码仍能按预期工作：


jQuery（文档）.ready（函数（$）{
常数宽度=750；
常数高度=50；
const centerY=高度/2；
常数振幅=0；
恒速=50；
常数度=45；
让startTime=0；
设previousTime=0；
设pausedTime=0；
让暂停=假；
让画布，ctx；
让查罗布斯；
常量开始=（）=>{
canvas=document.createElement（'canvas'）；
画布宽度=宽度；
canvas.height=高度；
canvas.id='can'；
ctx=canvas.getContext（'2d'）；
document.body.appendChild（画布）；
window.addEventListener（'blur'，（）=>{
如果（！暂停）{
暂停=真；
pausedTime=Date.now（）-startTime；
}
});
window.addEventListener（'focus'，（）=>{
如果（暂停）{
暂停=错误；
startTime=Date.now（）-pausedTime；
制作动画（）；
}
});
charObjs=initScrollText（“销售”）；
startTime=Date.now（）；
previousTime=getTime（）；
制作动画（）；
};
常量initScrollText=（文本）=>{
ctx.font='bold 32px Courier New'；
设位置=0；
返回text.split（“”）.map（（字符）=>{
常量宽度=ctx.measureText（char）.width；
常量charObj={
烧焦
宽度
位置
};
位置+=宽度；
返回charObj；
});
};
常量getTime=（）=>{
返回暂停？
暂停时间：
Date.now（）-startTime；
};
常量滚动文本=（dt）=>{
ctx.fillStyle='白色'；
charObjs.forEach（（charObj）=>{
charObj.位置+=dt*速度；
如果（字符位置>宽度）{
charObj.position=-charObj.width；
}
常数y=数学sin（charObj.位置/度）*振幅；
ctx.fillText（charObj.char，charObj.position，centerY+y）；
});
};
常量动画=（）=>{
const now=getTime（）；
常数dt=（现在-以前的时间）*0.001//增量时间，以秒为单位。
以前的时间=现在；
ctx.fillStyle='黑色'；
ctx.fillRect（0，0，宽度，高度）；
滚动文本（dt）；
如果（！暂停）{
请求动画帧（动画）；
}
};
start（）；
});
jQuery（文档）.ready（函数（$）{
$（“#can”）。追加（“#saletop”）；
})；

测验
是在画布上标记“**代码的其余部分**”的部分添加内容的代码。@Andy我刚刚发布了一个链接
<div class="salebanenr">
 <div class="row">          
  <div class="col-12 col-md-12" id="saletop">

  </div>                    
 </div>
</div>