如何用JS将Canvas插入指定div容器？新手代码问题求助

嘿，刚入门JS碰到这种DOM插入的小问题太正常啦，我来帮你调整下代码就能解决～

你当前的代码是把canvas直接插到了<body>的最前面，而不是目标div里。要把canvas放到<div class="ip_first_block">中，只需要两步：

• 第一步：定位到目标div：用document.querySelector()通过class选择器找到这个div
• 第二步：将canvas插入到目标div内部：用DOM元素的appendChild()方法完成插入

修改后的完整代码 #

// 创建canvas的逻辑和你原来的完全一致，这部分没问题
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
let windowWidth = canvas.width = window.innerWidth;
let windowHeight = canvas.height = window.innerHeight;
canvas.id = 'canvas';

// 定位到目标div（class选择器前面要加`.`）
const targetContainer = document.querySelector('.ip_first_block');

// 把canvas插入到目标div里
// 如果想保留div里原有的文字，直接用appendChild即可
targetContainer.appendChild(canvas);

// 如果你想替换掉div里原来的"CANVAS SHOULD BE HERE"文字，先清空再插入：
// targetContainer.innerHTML = '';
// targetContainer.appendChild(canvas);

额外注意事项 #

如果你的JS代码是写在<head>标签里的，可能会出现找不到目标div的情况——因为浏览器还没加载完页面的DOM结构。这时候可以把JS代码放到<body>标签的最后面，或者用DOMContentLoaded事件包裹代码，确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 把上面的所有代码都放在这个函数里
});

这样就能完美把canvas放到你想要的位置啦 😊

内容的提问来源于stack exchange，提问作者JGeorgeJ