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中的原生模板引擎http://knockoutjs.com/。还有很多其他jquery模板解决方案： https://stackoverflow.com/search?q=jquery+templating

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

1 个答案: