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);

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

1 个答案: