javascript - 使用jquery以结构化方式按条件创建动态元素

Question

有一种更好的方法可以使用 jquery 按条件构建或创建动态元素。现在用纯javascript编写的代码如下所示:

if (some_var == some_condition) {
 document.write("<tr>");
 document.write("<td></td>");
 document.write("<td>");
 document.write("<input type='BUTTON' onclick='CheckForm(this.form)' value='Enter'>");
 document.write("<input type='reset' value='Cancel'>");
 document.write("</td>");
 document.write("</tr>");
}       

如果大量代码以这种方式编写，我会在网页上遇到困难...并且我想采用更好的结构并将这段代码组织在可理解的 block 中。所以我需要以一种干净的方式处理动态设计、标记和代码。

如何使用 jquery more 修改上面的代码，使其更可靠、更高效？

有一些资源或文章可以帮助我根据需要使用 jquery 创建不同的 html 元素吗？

Answer 1

嗯，有两种方法可以使用 jQuery 创建 html 元素，请使用最适合您的一种。第一个选项更快。

1

var $td = $('<tr><td>Hello world</td></tr>');

2

var $tr = $('<tr/>');
var $td = $('<td/>').text('Hello world');

那么你可以简单地做

$tr.append($td);

等等...一个简化的例子，但你明白了。如果您想让我详细说明，请告诉我。