首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用jQuery构建HTML (~= DOM)

使用jQuery构建HTML (~= DOM)
EN

Stack Overflow用户
提问于 2009-04-30 02:39:28
回答 4查看 17.2K关注 0票数 18

我可能做错了什么,但是我还没有找到一种好的方法来动态构建基本的HTML/DOM结构,比如列表。一个简单的例子是在给定json (对象)这样的输入的情况下构建一个表(表元素、行、单元格,具有适当转义的文本内容)。

我遇到的问题是,大多数调用(如".append()“、".html()”、".text()")似乎没有以直观的方式链接(至少对我而言)。例如,you ‘t do如下所示:

$("#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"的dup

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2009-04-30 02:45:43

您可以这样做:

$("#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");
票数 14
EN

Stack Overflow用户

发布于 2011-12-06 09:32:08

您可以使用append

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

如果你真的坚持,你可以使用appendTo,但它不那么直观,会更慢,需要更多的击键:

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

在任何情况下,使用.text("...")来转义特殊字符(并避免XSS攻击)都很重要。

更好的,当你厌倦了写这些东西时,你真的想看看jsrendermustachehandlebarsdoT或者其他javascript模板解决方案。它允许您将代码与HTML (如MVC)分开,并使您正在构建的内容更加清晰。它也更容易修改。

票数 7
EN

Stack Overflow用户

发布于 2009-04-30 05:27:01

快速注意:此外,AppendDOM插件看起来也可以简化任务。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/805159

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档