0

ここでは、JavaScript を使用しないユーザーを無視し、アクセシビリティも無視しましょう。JavaScript を使用して HTML ドキュメントにコンテンツを挿入するベスト プラクティスを教えてください。

これまでのところ、私はこれらの解決策を思い付きました：

  • HTML のスケルトンを作成し、jQuery を介して入力します ( を使用$(tag).text()) (ただし、間違っている場合は訂正してください。これにより、コンテンツをアニメーション化できなくなります)
  • JS を使用してすべてのコンテンツを HTML 形式で挿入します。これにより、次のようなことが可能になります$("<tag>stuff</p>").fadeIn()。

フェージングは​​単なる例として使用されていることに注意してください。一般的なベスト プラクティスがあるかどうかを知りたいです。

4

1 に答える 1

3

通常、私が言うには両方の組み合わせです。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);
于 2013-03-16T09:55:44.533 に答える