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

Question

现在让我们忽略没有 JavaScript 的用户，也忽略可访问性。 我想知道通过 JavaScript 将内容注入(inject) 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);