動態構建使用jQuery

我需要能夠動態地生成一個相當大的DOM元素（和插入到DOM）是相當可觀的，如下面的代碼段的HTML元素：動態構建使用jQuery

<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元素的更好的方法。

來源

2012-12-02 balteo

您可以選擇子元素並將響應數據應用於它們而不是串接。我認爲，根據您的代碼段的情況，可能會有多條消息。在這種情況下，您可以使用模板來追加每個後續的消息分區。我更喜歡knockoutjs中的本地模板引擎，http://knockoutjs.com/。有很多其他的jQuery模板解決方案： https://stackoverflow.com/search?q=jquery+templating

來源

2012-12-02 13:55:06

謝謝吉姆！淘汰賽似乎與我想達到的目標非常相關。不過，我對它完全陌生。你能否回答最後一個問題：你是否記得這裏描述的KO模板（http://knockoutjs.com/documentation/template-binding.html）或KO中的其他內容？ – balteo

不客氣。是的，http://knockoutjs.com/documentation/template-binding.html上的Native模板就是我所指的。我在我的博客中有一個例子，我使用knockoutjs填充級聯選擇輸入，如果有幫助：http://jimfrenette.com/2012/10/jquery-mobile-cascaded-selects-using-mvc4-and-knockoutjs/另外， Ryan Niemeyer在jsfiddle上提供了一些很好的幫助我學習了knockoutjs：http://www.knockmeout.net/2011/08/all-of-knockoutjscom-live-samples-in.html –

動態構建使用jQuery

回答

相關問題