点击按钮修改div内容时插入的script脚本无法执行如何解决

通过innerHTML插入的<script>标签不会被浏览器解析执行，这是浏览器内置的安全策略，目的是防范恶意脚本注入攻击。仅页面初始加载时解析到的、或是通过document.createElement标准DOM API动态创建插入的script标签才会被正常加载执行。
另外补充说明：你原有写法中将script标签嵌套在canvas标签内部的写法本身不规范，canvas标签内部的内容仅作为浏览器不支持canvas特性时的降级展示内容，仅初始加载时浏览器会额外解析内部的script，动态插入时该写法也会进一步导致逻辑异常。

方案1：拆分插入逻辑（适配单按钮场景） #

先插入canvas元素，再单独创建script标签插入DOM，代码如下：

document.querySelector(".grafica-today").addEventListener("click", function() {
    const container = document.querySelector(".grafica-recipiente");
    // 插入canvas元素
    container.innerHTML = "<canvas id='graficaDiaria'></canvas>";
    // 手动创建script标签
    const dynamicScript = document.createElement('script');
    dynamicScript.src = 'js/graficDiaria.js';
    container.appendChild(dynamicScript);
});

方案2：封装通用方法（适配多按钮切换场景） #

如果有多个按钮对应不同的图表渲染需求，可以封装通用逻辑减少重复代码：

/**
 * 向容器插入canvas和对应渲染脚本
 * @param {string} canvasId canvas元素的ID
 * @param {string} scriptPath 对应渲染脚本的路径
 */
function loadGrafica(canvasId, scriptPath) {
    const container = document.querySelector(".grafica-recipiente");
    // 清空原有内容
    container.innerHTML = '';
    // 创建并插入canvas
    const canvas = document.createElement('canvas');
    canvas.id = canvasId;
    container.appendChild(canvas);
    // 创建并插入渲染脚本
    const script = document.createElement('script');
    script.src = scriptPath;
    container.appendChild(script);
}

// 绑定不同按钮的点击事件
document.querySelector(".grafica-today").addEventListener("click", () => {
    loadGrafica('graficaDiaria', 'js/graficDiaria.js');
});
document.querySelector(".grafica-global").addEventListener("click", () => {
    loadGrafica('graficaMundial', 'js/graficaMundial.js');
});

• 插入顺序保证canvas先进入DOM，再加载执行渲染脚本，避免脚本执行时获取不到canvas元素的问题
• 如果需要避免同一脚本重复加载，可以自行添加脚本加载状态的缓存判断逻辑

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