javascript - 使用 jQuery 动态构建一个相当大的 DOM 元素

Question

我需要能够动态生成(并插入到 DOM 中)相当大的 HTML 元素，例如下面的代码片段:

<div class="messageToAndFromOtherMember" id="13">
    <span>the message</span> 
    <span>2012-12-02 14:05:45.0</span> 
    <span>sent</span>
    <input type="checkbox" value="13" id="listOfMessagesForDeletion3" name="listOfMessagesForDeletion">
    <input type="hidden" name="_listOfMessagesForDeletion" value="on">
</div>

到目前为止，我不确定如何构建如此大的 DOM 元素并遵循 jQuery 最佳实践。我现在所做的只是简单地连接一个字符串，如下所示(这非常丑陋......):

        $("#latestMessages"+" "+"div[id^='"+response.senderId+'.'+response.recipientId+"'], #latestMessages"+" "+"div[id^='"+response.recipientId+'.'+response.senderId+"']").replaceWith("<div id='"+latestMessageId+"'><span>"+response.message+"</span><span>SENT</span><span><a href='"+response.recipientId+"'>ma conversation avec "+response.recipientId+"</a></span></div>");

如果有人能建议一种更好的构建 DOM 元素的方法，我将非常感激。

Answer 1

您可以选择子元素并将响应数据应用于它们，而不是串联。根据您的代码片段的上下文，我认为可能有不止一条消息。在这种情况下，您可以使用模板来附加每个后续消息 div。为此，我更喜欢knockoutjs 中的 native 模板引擎，http://knockoutjs.com/ 。还有很多其他 jquery 模板解决方案: https://stackoverflow.com/search?q=jquery+templating