0

示例代码 

var jqxhr=$.getJSON("http://search.twitter.com/search.json?callback=?",{q:query},
                function(data) {
                    ... question.               
                });

问题

现在我需要为每个推文结果创建类似这样的东西（例如......）

<article class="tweet">
    <header>
        <img class ="tweet_img"src="data.profile_image_url"/> 
    </header>
    <p class="tweet-text">data.text</p> 
</article>

好吧，我知道将每个结果附加到文档的几种方法：

  1. 创建一个大的 HTML 字符串并从JSONP添加数据并将其附加到某个容器。
  2. 创建 ap 元素，标题元素...与它们一起工作，然后将最终元素附加到某个容器。

现在的问题是：根据您的经验，正确的方法是什么？
我的意思是使用良好原则的正确方法。

请不要询问 html，这是愚蠢的例子。
谢谢。

4

5 回答 5

1

好吧，最佳实践会告诉您不要使用 DOM 元素的 innerHTML 属性，这是您使用选项 1 所做的事情。但除非您担心立即使用 Javascript 操作代码、附加事件或安全问题围绕标签注入（我不知道这是一个多大的问题了）然后创建一个 HTML 字符串并使用 innerHTML 插入它会更快更容易更新。

于 2012-07-24T04:39:52.717 回答
0

如果您想将一些事件处理程序附加到元素，那么您应该单独生成它们。

但是如果您不想附加任何事件处理程序，那么我会推荐第一种方法

$("body").append('<article class="tweet"><header><img class ="tweet_img" src="'+data.profile_image_url+'"/></header><p class="tweet-text">'+data.text+'</p></article>')
于 2012-07-24T04:36:38.350 回答
0

我知道的最简洁的方法是使用像Mustache这样的模板系统，而​​不是“JS 中的 HTML”

var template = html_string,                   //HTML from a string or from AJAX
    data = {...data...},                      //structured data
    html = $(Mustache.render(template,data)); //wrap in jQuery to operate

html.appendTo(somewhere_in_DOM);
于 2012-07-24T04:40:18.777 回答
0

我会推荐你​​使用一些模板引擎，比如Handlebars.js，它是你问题的正确解决方案。

哪个有更多的选项，有更多的条件选项，这些选项在功能上很有用。只需访问上面的链接，您就会有一些想法。

于 2012-07-24T04:40:27.807 回答
0

有几种有效的方法，每种方法都有自己的优势......

仅在您的 java 代码中将 HTML 生成为字符串并将其添加到 .innerHTML 的技术被认为是执行速度最快的方法之一……但它提供的 HTML 验证很少。

或者，您可以直接使用 DOM 方法构建 HTML，创建标签并附加它们以构建结构。这通常更安全，因为您需要进行更多验证，但是 DOM 方法非常冗长，这使得它们输入起来有点痛苦……而且代码更加冗长，因为您必须一次添加一个属性好。

我个人的偏好，特别是因为您已经在使用 JQuery，将使用 JQuery 构建标签和文本节点，并使用 JQuery 将它们放在一起，这允许您以更小的、更易于人工验证的单元来执行此操作，而无需变得过于冗长。

这还有一个优点，即 JQuery 生成新标签的方法为您提供了对不符合 DOM 标准的旧浏览器的额外支持。希望您实际上不必关心您的页面是否适用于那些较旧的浏览器，但更多的兼容性也不会受到伤害。

在这种方法中，您将编写如下内容：

var article = $('<article class="tweet"></article>');
var header = $('<header></header>');
var image = $('<img class="tweet_img" src="' + data.profile_image_url + '"></img>');
var tweet = $('<p class="tweet-text">' + data.text + '</p>');

header.append(image);
article.append(header, tweet);
$("#id_of_content_area_to_add_the_tweet_to").append(article);
于 2012-07-24T05:08:15.830 回答