不使用库，如何在父模块中访问子模块返回的数组？

核心错误原因 #

你的代码报错的直接原因是模块中的main变量未定义：createNewElements函数里执行main.appendChild(inputTask)时，main是在主文件中获取的DOM元素，模块文件没有访问这个变量的权限，也未通过参数或导入方式获取，所以会抛出ReferenceError: main is not defined。

修正方案 #

1. 修改模块代码，通过参数接收DOM元素

将main作为参数传递给createNewElements函数，让模块能正确访问需要挂载元素的容器：

export function createNewElements(main) {
    const allTask = [];
    const inputTask = document.createElement("form");
    const node = document.createElement("input");
    const addButton = document.createElement("button");
    let key = Date.now();
    
    main.appendChild(inputTask);
    inputTask.appendChild(node);
    inputTask.appendChild(addButton);
    
    addButton.innerText = "Add Your Task";
    inputTask.setAttribute("class", "inputArea");
    node.setAttribute("key", key);
    node.setAttribute("placeholder", "Put Your Task Here");
    
    allTask.push(inputTask, node, addButton);
    return allTask;
}

2. 修改主文件调用逻辑，传入main参数

调用createNewElements时把主文件中获取的main元素传进去，同时你的解构赋值写法是正确的，可以正常获取返回数组中的元素：

import * as createEle from './createEle.js';
const main = document.getElementById('main');
const add_task = document.getElementById('addTask');
const inProgress = [];

add_task.addEventListener('click', ()=>{
    addTask();
});

function addTask(){
     const [inputTask, node, addButton] = createEle.createNewElements(main);
     const taskArray = [inputTask, node, addButton];
     console.log(taskArray); // 现在可以正常打印返回的数组
}

额外说明 #

• 你使用的数组解构赋值const [inputTask, node, addButton] = createEle.createNewElements(...)是完全合法的，只要模块返回的数组顺序匹配，就能正确获取对应元素。
• 传参的方式比在模块中直接获取main元素更灵活，方便后续复用模块到不同的容器中。

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