用普通的旧 JS 动态渲染 DOM 元素的好方法是什么？

Question

我面临的挑战是使用普通的旧 Javascript 构建单页应用程序，不允许使用任何库或框架。虽然在 React 和 Angular 中创建动态 DOM 元素相当简单，但我提出的普通 JS 解决方案似乎很笨拙。我想知道是否有一种特别简洁或有效的方法来构建动态呈现的 DOM 元素？

下面的函数接受一个从 GET 请求接收的数组，并为每个项目呈现一个 div，传递值（很像你在 React 中映射结果并呈现子元素）。

  function loadResults(array) {
  array.forEach(videoObject => {
    let videoData =  videoObject.snippet;
    let video = {
       title : videoData.title,
       img : videoData.thumbnails.default.url,
       description : videoData.description
    };
    let div = document.createElement("DIV");
    let img = document.createElement("IMG");
    img.src = video.img;
    let h4 = document.createElement("h4");
    let title = document.createTextNode(video.title);
    h4.appendChild(title);
    let p = document.createElement("p");
    let desc = document.createTextNode(video.description);
    p.appendChild(desc);

    div.appendChild(img);
    div.appendChild(h4);
    div.appendChild(p);
    document.getElementById('results')
      .appendChild(div);
  });
}

这感觉不必要地笨拙，但我还没有找到更简单的方法来做到这一点。

提前致谢！

原文由 EFH 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意： 我在这里所说的一切都是在概念证明层面，仅此而已。它不处理错误或异常情况，也没有在生产中进行测试。请自行决定使用。

一个好的方法是创建一个为您创建元素的函数。是这样的：

 const crEl = (tagName, attributes = {}, text) => {
  const el = document.createElement(tagName);
  Object.assign(el, attributes);
  if (text) { el.appendChild(document.createTextNode(text)); }

  return el;
};

然后你可以像这样使用它：

 results
  .map(item => crEl(div, whateverAttributes, item.text))
  .forEach(el => someParentElement.appendChild(el));

我见过的另一个很酷的概念证明是使用 ES6 代理作为一种模板引擎。

 const t = new Proxy({}, {
  get(target, property, receiver) {
    return (children, attrs) => {
      const el = document.createElement(property);
      for (let attr in attrs) {
        el.setAttribute(attr, attrs[attr]);
      }
      for (let child of(Array.isArray(children) ? children : [children])) {
        el.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
      }
      return el;
    }
  }
})

const el = t.div([
  t.span(
    ["Hello ", t.b("world!")], {
      style: "background: red;"
    }
  )
])

document.body.appendChild(el);

Proxy 将 get 捕获在目标对象（空的）上，并使用被调用方法的名称呈现一个元素。这导致您看到的非常酷的语法 const el = 。

原文由 Madara‘s Ghost 发布，翻译遵循 CC BY-SA 3.0 许可协议