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

About good practices for creating and appending elements with JS

本文关键字：元素 JS 于使用 创建      更新时间：2024-01-13

示例代码

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. 创建一个p元素，一个头元素。。。使用它们，然后将最后一个元素附加到某个容器中

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

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

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

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

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

我所知道的最干净的方法是使用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);

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

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

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

我建议您使用一些模板引擎，如Handlebars.js，这是解决您问题的正确方法。

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

相关文章：