0

有一种更好的方法可以使用 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>");
}

如果很多代码都以这种方式编写，我会在网页上苦苦挣扎......我想建立一个更好的结构并将这段代码组织在可理解的块中。所以我需要以干净的方式处理动态设计、标记和代码。

如何使用 jquery more 修改上面的代码以使其更加活跃和高效？

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

4

3 回答 3

1

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

1

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

2

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

然后你可以简单地做

$tr.append($td);

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

于 2013-01-28T14:43:23.120 回答
1

你应该使用document.createDocumentFragment()

这样您就可以使用构建您的 html，然后根据需要附加它。 

var data = document.createDocumentFragment();
data.appendChild('<tr><td>hello</td></tr>');
document.getElementById("some-table").appendChild(data);

您不应该不断地操作 DOM，因为这样做代价高昂。

文档片段

于 2013-01-28T14:50:24.283 回答
0

如果可能，您可以将 HTML 保留在文档中并通过 CSS 触发其可见性，例如：

HTML

<tr class="onCondition">Rest of the HTML</tr>

CSS

.onCondition.hidden { display: none; }

JS

if (someCondition) { $('.onCondition').addClass('hidden'); } // or .hide() and without CSS

当然，这种方法在逻辑上也适用。

于 2013-01-28T14:49:56.970 回答