如何用JavaScript将part.html内容追加到main.html的body中？

方法1：使用现代Fetch API（推荐） #

先修改main.html，提前引入Plotly依赖（否则part中的脚本会报错），再添加加载逻辑：

<!doctype html>
<html>
<head>
    <!-- 引入Plotly库，保证part里的脚本能正常执行 -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <script>
        // 请求part.html文件内容
        fetch('part.html')
            .then(res => res.text())
            .then(html => {
                // 创建临时容器解析HTML结构
                const tempContainer = document.createElement('div');
                tempContainer.innerHTML = html;
                
                // 将解析后的元素逐个追加到body
                while (tempContainer.firstChild) {
                    document.body.appendChild(tempContainer.firstChild);
                }
            })
            .catch(err => console.error('加载part.html出错:', err));
    </script>
</body>
</html>

方法2：使用XMLHttpRequest（兼容旧浏览器） #

如果需要兼容不支持Fetch的旧浏览器，可改用XMLHttpRequest实现：

<!doctype html>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <script>
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'part.html', true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                const tempContainer = document.createElement('div');
                tempContainer.innerHTML = xhr.responseText;
                while (tempContainer.firstChild) {
                    document.body.appendChild(tempContainer.firstChild);
                }
            }
        };
        xhr.onerror = function() {
            console.error('加载part.html失败');
        };
        xhr.send();
    </script>
</body>
</html>

关键注意事项 #

• 必须提前引入Plotly：part.html中的脚本依赖Plotly对象，main.html的head里要先加载Plotly资源，否则会出现Plotly is not defined错误。
• 本地测试需用HTTP服务器：直接用file://协议打开main.html会触发跨域限制，阻止请求。建议用本地服务器运行，比如：
  • Python：执行python -m http.server
  • Node.js：先安装http-server（npm install -g http-server），再运行http-server
• 确保脚本正常执行：直接用document.body.innerHTML += html可能导致script标签不执行，通过临时容器逐个添加元素的方式，能让浏览器正确解析并执行脚本。

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