javascript - jQuery を使用してかなり大きな DOM 要素を動的に構築する

Question

以下のスニペットのように、非常に大きな HTML 要素を動的に生成 (および DOM に挿入) できるようにする必要があります。

<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 要素を構築するためのより良い方法を提案できれば、とても感謝しています。