如何在JavaScript中引入外部HTML文件并插入至指定DOM元素

推荐方案：用Fetch API实现（现代浏览器支持） #

直接修改scripts.js，通过Fetch请求拉取forms.html的内容，再插入到目标容器：

function drawFormContent() {
    // 请求forms.html文件
    fetch('forms.html')
        .then(res => {
            // 检查请求是否成功
            if (!res.ok) throw new Error(`请求失败：${res.status}`);
            return res.text(); // 把响应转为文本格式
        })
        .then(html => {
            // 将获取到的HTML插入到mainContent里
            document.getElementById('mainContent').innerHTML = html;
        })
        .catch(err => {
            console.log('加载出错：', err);
        });
}

额外优化：只提取目标元素 #

如果你不需要forms.html里的整个内容，只想拿#forms这个div的话，可以在获取后解析提取：

.then(html => {
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = html;
    // 拿到目标div
    const formDiv = tempContainer.querySelector('#forms');
    if (formDiv) {
        // 用appendChild避免覆盖原有内容，或者用innerHTML替换
        document.getElementById('mainContent').appendChild(formDiv);
    }
})

兼容旧浏览器方案：用XMLHttpRequest #

如果要兼容IE这类老浏览器，用传统的XHR：

function drawFormContent() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'forms.html', true);
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            document.getElementById('mainContent').innerHTML = xhr.responseText;
        } else {
            console.error('请求失败，状态码：', xhr.status);
        }
    };
    xhr.onerror = function() {
        console.error('网络请求出错');
    };
    xhr.send();
}

注意事项 #

• 必须在服务器环境下运行（比如用VS Code的Live Server插件、本地Apache服务器），直接双击打开本地HTML文件会触发跨域限制（file://协议不允许跨文件请求）。
• 你的index.html和forms.html文件结构不用改，保持原样即可。

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