使用jQuery构建HTML(〜= DOM)

前端之家收集整理的这篇文章主要介绍了使用jQuery构建HTML(〜= DOM)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我可能会做错事,但是我还没有找到一种很好的方式来动态构建基本的HTML / DOM结构,比如列表。给出像json(objects)这样的输入,简单的例子就是建立一个表(表格元素,行,单元格,正确转义的文本内容)。

我所遇到的问题是,大多数调用(如“.append()”,“.html()”,“.text()”)似乎并不直观(对我而言)链接。例如,你不能做这样的事情:

$("#divId").append("<table>").append("<tr>").append("<td>").text("some text");

text()调用似乎在主级别消除内容;并附加相同的范围内的东西。我会期望appennd()返回正在添加内容,但它似乎是返回自己的上下文。

我知道有一个简单的“appendText()”扩展有助于最​​后一部分。但是别人怎么样?

对于什么是值得的,现在我回到DOM,像这样

$("#divId")[0].appendChild(document.createElement("table"))....

但这是很冗长的。

所以我希望我错过了一些完全明显的东西,但是什么呢?调用除append()之外?

我尝试浏览jQuery参考文档,谷歌搜索,但大多数文档只是使用“嵌入所有的东西在一个字符串”;有问题,包括没有正确引用文字内容的问题。

(也:不,这不是“JQuery: Build HTML in ‘memory’ rather than DOM”的重复

解决方法

你可以这样做:
$("#divId").append("<table>").append("<tr>").append("<b>").text("some text");

作为:

$("#divId").append("<table><tr><td><b>some test</b></td></tr></table>");

要么

$("<b></b>").text("some text").appendTo("<td></td>").appendTo("<tr></tr>").appendTo("<table></table>").appendTo("#divId");
原文链接:https://www.f2er.com/jquery/182418.html

猜你在找的jQuery相关文章