Question

示例代码

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>

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

创建一个大的HTML字符串并添加 JSONP 中的数据并将其附加到某个容器中。
创建一个p元素，一个标题元素......使用它们，之后将一个最终元素追加到某个容器中。

现在的问题是：根据您的经验，做到这一点的正确方法是什么？我指的是使用良好原则的正确方法。

请不要问html，这是一个愚蠢的例子感谢。

Answer 1

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

Answer 2

如果要将一些事件处理程序附加到元素，则应单独生成它们。

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

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

Answer 3

我知道最简洁的方法是使用Mustache之类的模板系统，而不是“JS in JS”

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);

Answer 4

我建议你使用像Handlebars.js这样的模板引擎。这是解决问题的正确方法。

其中有更多选项，其中有更多条件选项可用于功能。只需访问上面的链接，您就会有所了解。

Answer 5

有几种有效的方法各有各自的优势......

在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);

关于使用JS创建和附加元素的良好实践

5 个答案: