1

我需要能够动态生成（并插入到 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 元素的方法，我将不胜感激。

4

1 回答 1

1

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

于 2012-12-02T13:55:06.867 回答