Question

我目前正在以这种方式创建html ul。首先，我正在制作一个html变量。然后我将li附加到这个html变量。现在我不知道这是否是一种更好的方式。在搜索这个时，我遇到了这个$（document.createElement（'div'））;.还有其他更好的方法吗？我需要理解为什么我目前的方法不好或者为什么我应该遵循的其他方法比这更好？

function newsfeed(userid, username, msg, date_time) {
    var url = "https://graph.facebook.com/" + userid + "/picture";
    //var limit = 80;
    if(typeof(msg) != "undefined" && msg != "") {
        html += "<div class='container'>";
        html += "<li class='profile_image'><img src='" + url + "' /></li>";
        html += "<li class='from_name'>" + short_msg(username, true) + "</li>";
        html += "<li class='message'>" + short_msg(msg, false) + "</li>";
        html += "<li class='time_ago'>" + relative_time(date_time) + "</li>";
        html += "<li class='no_float'></li>";
        html += "</div>";
    }

    return html;
}

Answer 1

使用jQuery时，以您的方式创建DOM元素的AFAIK是最好的。这里有一些解释：

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

Answer 2

使用jQuery.tmpl()。例如：

<script id="tpl1" type="text/x-jquery-tmpl">
    <div class="container">
        <li class="profile_image"><img src="${url}" /></li>
        <li class="from_name">${username}</li>
        <li class="message">${msg}</li>
        <li class="time_ago">${date_time}</li>
        <li class="no_float"></li>
     </div>
</script>
<script type="text/javascript">
    function newsfeed(userid, username, msg, date_time) {
        var url = "https://graph.facebook.com/" + userid + "/picture";
        //var limit = 80;
        if(typeof(msg) != "undefined" && msg != "") {
            var $html = $('#tpl1'),tmpl({
                url: url,
                username: short_msg(username, true),
                msg: short_msg(msg, false),
                date_time: relative_time(date_time),

            }); 
            return $html.html();
        }
    }
</script>

除了提高可读性（您可以在HTML代码段上使用语法高亮工具等）之外，这将对您的变量进行html编码并对XSS攻击提供一些保护。（不过，您仍应手动编码URL。）

这是使用jquery构建html的更好方法

2 个答案: