使用JavaScript动态加载JSON内容时遭遇左侧赋值无效的ReferenceError错误求助

你遇到的这个错误核心原因是直接给DOM元素对象赋值——这在JavaScript里是完全不允许的，你需要通过设置DOM元素的对应属性来修改内容，而不是直接把值赋给元素本身。接下来我们一步步排查并修正你的代码：

1. 定位错误根源 #

你的代码里这几行是问题的核心：

clone.querySelector('figure a') = element.url;
clone.querySelector('.article-content a h2') = element.heading;
clone.querySelector('img') = element.src;

你不能直接把值赋值给querySelector返回的DOM元素，必须设置元素的专属属性：

• 链接的跳转地址要设置href属性
• 标题文本要设置textContent（推荐用这个，比innerHTML更安全，避免XSS风险）
• 图片的地址要设置src属性

另外还有两个容易忽略的小问题：

• 你的JSON里存储标题的键是data，但代码里用的是element.heading，会导致标题无法正确显示
• document.getElementsByClassName('hero-inner')返回的是元素集合，需要取第一个元素才能调用appendChild；换成querySelector会更简洁直观

2. 修正后的完整代码 #

function loadJSON(path) {
  fetch("../data/main.json")
    .then((response) => {
      // 先检查请求是否成功，处理HTTP错误
      if (!response.ok) {
        throw new Error(`请求失败！状态码: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      console.log(data);
      // 提前获取目标容器，避免循环里重复查询DOM
      const heroInner = document.querySelector('.hero-inner');
      data.forEach(element => {
        // 克隆模板内容
        const first = document.getElementById('first');
        const clone = first.content.cloneNode(true);
        
        // 设置链接跳转地址
        clone.querySelector('figure a').href = element.url;
        // 设置标题文本（对应JSON里的data字段）
        clone.querySelector('.article-content a h2').textContent = element.data;
        // 设置图片地址
        clone.querySelector('img').src = element.src;
        
        // 将克隆好的内容添加到页面容器
        heroInner.appendChild(clone);
      });
    })
    .catch((err) => { // 用catch处理Promise错误，这是标准写法
      console.error('加载JSON失败:', err);
    });
}

3. 额外优化说明 #

• 提前获取hero-inner容器，避免在forEach循环里重复查询DOM，提升页面性能
• 增加了response.ok的检查，能处理HTTP请求失败的情况（比如404文件不存在、500服务器错误）
• 用const替代var，符合现代JavaScript规范，避免变量提升带来的潜在问题
• 错误处理改用catch，这是Promise错误处理的标准方式，比用then的错误回调更清晰

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