Question

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

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

e.g

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。

Answer 2

你可以在这里得到更好的解释。

动态创建html

2 个答案: