异步请求接收节点能否直接插入元素？避免绑定实例变量的技术问询

首先直接给结论：你写的this.element = el('div', { className: "header" }, ...this.j({news: id_news}));这种方式不可行。原因很简单：this.j()如果是发起异步POST请求的方法，它没法同步返回服务器响应的数组——异步请求是后台执行的，代码会直接往下走，此时this.j()返回的大概率是一个Promise对象，或者干脆是undefined，而el()函数是同步创建DOM元素的，它接收的子节点参数需要是真实的DOM节点（或可转成节点的同步值），把Promise传进去只会导致渲染出错误内容。

那怎么实现你想要的「避免实例变量、创建元素直接入文档、请求返回自动加子节点」的目标？用闭包捕获容器元素就行，不用把容器绑定到this.element，代码示例如下：

// 1. 同步创建容器元素，直接插入文档，用变量暂存（仅在当前作用域有效，不用挂到实例上）
const headerContainer = el('div', { className: "header" });
// 假设要插入到页面的某个父元素里，比如body
document.body.appendChild(headerContainer);

// 2. 发起异步请求，在回调里直接操作闭包捕获的headerContainer
this.j({news: id_news}).then(newsList => {
  // 把返回的数组转成DOM节点
  const newsNodes = newsList.map(newsItem => {
    return el('div', { className: "news-item" }, newsItem.title);
  });
  // 插入到容器里
  headerContainer.append(...newsNodes);
});

甚至可以把创建和插入写成一行，更简洁：

const headerContainer = document.body.appendChild(el('div', { className: "header" }));

this.j({news: id_news}).then(data => {
  headerContainer.append(...data.map(item => el('p', {}, item.content)));
});

核心逻辑就是：容器元素在同步代码里创建并插入文档，然后利用闭包让异步回调能直接访问到这个容器变量，全程不需要把容器挂到实例的this.element上，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Дмитрий Варзанов