javascript - 动态创建html

Question

我正在从 JSON 加载数据并希望将其显示在网站上。不用说，每个数据部分都应该有自己的空间，例如 div 等。

我的问题:有没有更好的方法如何将这些数据放到网络上创建新的 div，然后将其附加到每个数据部分的容器中？

例如

var div = document.createElement("div");
div.onclick = doSomething;
var p = document.createElement("p");
p.innerHTML = json_response[0].name;
div.appendChild(p);

document.body.appendChild(p)

对于海量数据来说，这会不会太慢了？有没有更有效的方法？

Answer 1

您可以通过以下两种方式之一创建每个部分:

function createSection(name) {
    const template = document.createElement('template');
    template.innerHTML = `
<div>
    <p>${name}</p>
</div>
`;
    return template;
}

参见https://stackoverflow.com/a/25214113/2106834了解更多详情。

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

const templateClosure = template`
<div>
    <p>${'name'}</p>
    <p>${'someOtherKeyInYourObject'}</p>
</div>`;

let n;

for(n = 0; n < json_response; n++) {
    templateClosure(json_response[n]); // returns your HTML string
}

参见https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals了解更多详细信息。