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

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

if（some_var==some_条件）{
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
}       

如果很多代码都是用这种方式编写的，那么我正在努力处理一个网页……我想把这段代码放在一个更好的结构中，用一个可以理解的块来组织它。所以我需要以一种干净的方式处理动态设计、标记和代码

如何使用jquery对上面的代码进行更多的修改，以使其更具可搜索性和效率

---

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

好吧，使用jquery创建html元素有两种方法，使用最适合您的方法。第一种选择更快

1.

---

等等。。。一个简单的例子，但你明白了。如果需要我详细说明，请告诉我。

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

HTML

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

JS

.onCondition.hidden { display: none; }

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

---

当然，这种方法在逻辑上也是相反的。

您应该使用

document.createDocumentFragment（）

通过这种方式，您可以使用构建html，然后根据需要附加它

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

var data=document.createDocumentFragment（）；
data.appendChild（'hello'）；
document.getElementById（“某些表”）.appendChild（数据）；

您不应该不断地操纵DOM，因为这是代价高昂的

---

您有什么理由需要将其分解成这样的多个语句吗？还有，它的动态性是什么？我认为它也可以做

$（''''text:'Hello World'}）

@bullfrog正确，但我不使用它，因为它在ie7中不起作用。

.onCondition.hidden { display: none; }

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

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