Question

只是想知道用javascript输出html标签是不好的做法。例如，假设我有一个表，并在页面加载ajax请求获取数据填充它。对于每行数据，我将需要输出另一行，如下所示：

$('#results').html('<tr><td>'+data.people[i]['name']+'</td><td>'+data.people[i]['age']+'</td><td>'+data.people[i]['gender']+'</td></tr>');

这样做不好吗？

Answer 1

这不是正常做法。这就是你通常动态地动态添加html的方法。

Answer 2

它还不错。你可以做两件事来改善它：

我想你在每个循环中都有这个，所以你可以在用HTML设置之前构建你的完整表。所以你只需执行一次.html（）操作。

var yourTableHTML = ""

$.each(yourContentArray, function(data,i){
  youtTableHTML += '<tr><td>'+data.people[i]['name']+'</td><td>'+data.people[i]['age']+'</td><td>'+data.people[i]['gender']+'</td></tr>'
})

$('#results').html(yourTableHTML);

第二件事是，你可以在你克隆的HTML文件（模型行）中使用HTML模型。因此，如果其他人必须更改HTML一次，他就不需要将javascript更改为。

Answer 3

只有当这个JS在外部文件时才可以。

否则，IE可能会让你发疯，而且你的HTML不会在XHTML和严格的情况下验证。

Answer 4

不是说什么是最佳实践，而是告诉你直接插入HTML的优点和缺点：

<强>赞成：

快速。这比使用jQuery创建单个元素并一次附加一个元素要快得多。
基本。因为它只是一个字符串，你可以像这样执行巧妙的技巧：
```
var lis = ['One', 'Two', 'Three'];
var html = '<li>' + lis.join('</li><li>') + '</li>';
```
直接使用字符串时，许多其他操作同样灵活。

<强>缺点：

容易出错。不仅在字符串中，而且在数据中也很容易出错。如果您的数据没有未转义的HTML字符，那么您的字符串可能会被破坏。
难以阅读（有争议）。在字符串之间插入的许多变量可能使其难以阅读。其他人可能会争辩说，虽然许多.append()和.addClass()以及.attr()使其变得更加困难。

为了便于比较，您的示例不使用.html()：

var tr = $('<tr>');
$('<td>').text(data.people[i]['name']).appendTo(tr);
$('<td>').text(data.people[i]['age']).appendTo(tr);
tr.appendTo('#results');

Answer 5

这是最近使用网站作为Web服务器工作并提供数据然后使用客户端脚本来创建UI的趋势。

这绝对不错，它将限制传递的数据量，并提供更好的服务器/客户端，业务/ UI分离。

警告是依赖客户端会对浏览器施加压力。如果客户端是智能手机，那么可能会遇到过多的JavaScript。

Answer 6

这是正常的，正如sushil bharwani所暗示的那样。但是：

务必使用密切标签。
确保数据不包含任何标记。
限制字符串的大小;浏览器可能会因为太长而挂起。

Answer 7

我认为最完整的答案是：只要没有不同的方法来完成你想要执行的任务，就可以在jQuery，javascript等中添加html标签。为了澄清 - 用jQuery构建一个完整的静态页面是不行的，你可以用html正常构建它，可以用jQuery向网页添加动态内容，这是它的主要原因之一。

Answer 8

嗯，不。只要你保持小剂量，这是相当可接受的做法。做太多会在网页上添加明显的延迟。我会保持它更具结构性，尽管这只是个人偏好：

var tr = $('<tr></tr>');

var td = $('<td></td>');
td.text(data.people[i]['name']);
tr.append(td);

td = $('<td></td>');
td.text(data.people[i]['age']);
tr.append(td);

$('#results').html(tr);

这样做可以确保它更容易阅读（至少在我看来），因此以后更容易修复/添加。

Answer 9

我不推荐它，因为你正在跳过内置功能以逃避输入。我不确定它是否是一个安全漏洞，但将随机内容注入到期望某种格式的字符串中绝不是一种好习惯。请改用jQuery.text()方法。

使用jquery输出html标签是错误的吗？

9 个答案: