javascript - 通过 JavaScript 编辑 HTML 内容的最佳实践

Question

现在让我们忽略没有 JavaScript 的用户，也忽略可访问性。我想知道通过 JavaScript 将内容注入 HTML 文档的最佳实践是什么。

到目前为止，我想出了以下解决方案：

• 创建 HTML 的骨架并通过 jQuery 填充它（使用$(tag).text()）（但是，如果我错了，请纠正我，这会阻止我为内容制作动画）
• 通过 JS 以 HTML 格式插入所有内容，这让我可以做类似的事情$("<tag>stuff</p>").fadeIn()和其他事情

请注意，衰落仅用作示例，我想知道是否有一般的最佳实践。

Answer 1

通常我会说两者的结合。您可能希望在 HTML 和动态元素中创建静态容器，作为 jQuery 元素进入内部，您可以修改这些元素并在以后添加。理想情况下，您会使用某种模板解决方案。最基本的例子：

function template(data, html) {
  return data.map(function(obj) {
    return html.replace(
      /#\{(\w+)\}/g,
      function(_, match) { return obj[match]; }
    );
  }).join('');
}

var people = [
  { name: 'John', age: 25, status: 'Single' },
  { name: 'Bill', age: 23, status: 'Married' },
  { name: 'Lukas', age: 47, status: 'Married' },
];

var html = template(people,
  '<div>\
    <h1>Name: #{name}</h1>\
    <h2>Age: #{age}, Status: #{status}</h2>\
  </div>'
);

$('#container').append(html);