如何将HTML文件内容赋值给JavaScript变量？新手技术求助

因为你未使用Node.js，仅需浏览器端方案，以下是两种简单可行的实现方式：

方法1：使用浏览器原生Fetch API #

通过HTTP请求直接读取外部HTML文件内容，是最直接的动态加载方案：

window.onload = async () => {
    const position = document.getElementsByClassName('className')[0];
    // 发起请求读取外部HTML文件
    const response = await fetch('你的外部HTML文件名.html');
    const html = await response.text();
    position.insertAdjacentHTML('afterbegin', html);
};

注意事项：

• 本地开发时，必须用Live Server这类工具打开页面（不能直接双击HTML文件），否则会触发跨域限制
• 将'你的外部HTML文件名.html'替换为实际文件名，比如'content.html'

方法2：使用HTML<template>标签（适合静态内容） #

如果HTML内容无需动态加载，可将其嵌入页面的<template>标签中，通过DOM操作读取：

1. 在页面HTML中添加模板：

<template id="myTemplate">
    <!-- 直接粘贴你的多行HTML内容 -->
    <div class="example-box">
        <h2>示例标题</h2>
        <p>这是模板里的段落内容</p>
    </div>
</template>

2. 在JS中读取并插入内容：

window.onload = () => {
    const position = document.getElementsByClassName('className')[0];
    const template = document.getElementById('myTemplate');
    // 克隆模板内的DOM节点
    const htmlContent = template.content.cloneNode(true);
    position.appendChild(htmlContent);
};

这种方式无需发起网络请求，结构清晰，也不会有跨域问题。

关于你之前的报错原因 #

const html = index.html是错误写法：index.html不是合法的JS变量名，浏览器无法识别它代表外部文件，因此触发"未定义"错误。JS不能直接通过文件名读取本地文件，必须通过HTTP请求或DOM操作获取内容。

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