Как вставить много html на страницу с jquery?

Question

Я работаю над скриптом комментариев с использованием PHP и jquery.

Мои данные jquery post для моего скрипта php backend, при успехе мне нужно, чтобы он вставлял результаты, возвращаемые backend-скриптом.

Сейчас у меня есть все, кроме части, которая добавляет комментарий на страницу, в которую я застрял. Я могу использовать что-то вроде этого;

$('#comments').prepend(data.comment); 

Приведенный выше код будет добавить текст/комментарий навеску в комментариях Див, но мне нужно, чтобы сделать больше, чем просто добавить текст, мне нужно, чтобы добавить другие DIV-х, текст комментария, фото пользователя , дата, все другие вещи, которые вы видите на фотографии ниже.

У меня нет проблем с получением всех этих данных, но как я могу добавить все это на страницу?

Что-то похожее на это ниже, но с гораздо большим количеством кода?

$('div#loader').append('<span class="success">Thanks for your comment!</span>'); 

---

Вот страница с существующими комментариями, при добавлении Аякса пост, мне нужно вставить новый комментарий в список и он похож на другие

alt text http://img2.pict.com/21/4e/f0/1505261/0/800/screenshot2b20.png

Answer 1

Я бы не рекомендовал, чтобы вы отправляли HTML-разметку в свои запросы. Например, если вы используете JSON, вы сэкономите полосу пропускания, и ваши пользователи будут более счастливы с сайтом, который быстрее загружается.

Это лучше, если вы используете JQuery и JavaScript клонировать шаблон со страницы (может быть скрытый DIV, например):

<div class="comment-template"> 
    <div class="header">{title}</div> 
</div> 

И тогда в ваших JS:

$.post('action', data, function(data) { 
     var template = $('.comment-template'); 
     var placeholder = $('#somePlaceholder'); 

     for(int i = 0; i < data.length; i++) { 
     var comment = template.clone(); 
     comment.html(comment.html.replace('{title}', data[i].title)); 
     comment.appendTo(placeholder); 
     } 
    }, 
    "json" 
); 

Это уверен, что работа будет намного быстрее, чем включение разметки в ваши запросы.

Answer 2

Вы можете сделать это несколькими способами:

1. Вы можете создать кучу элементов в Jquery через $('<div/>').html('Hi Mom') и создайте свой DOM таким образом
2. Вы можете создать HTML-код, который вы хотите, как часть вашего возвращаемого набора ajax (отходит от полосы пропускания)
3. Вы можете создать шаблон и изменить значения.

IE:

<div id="someTemplate" style="display: hidden"> 
    <div class="username"></div> 
    ... 
</div> 

Теперь вы можете получить содержимое someTemplate, дублировать его, заполнить в деталях на имя класса, и вы хорошо.

Answer 3

Если вы создаете много данных HTML, то вы можете иметь ваш PHP скрипт возвращает HTML, а затем добавить его с помощью:

$.post('/Url/', data, function(html) { 
    $('div#loader').append(html); 
}, "html"); 

Преимуществом этого является то, что это легко и позволяет повторно использовать Генерация HTML на сервере. Недостатком является то, что он использует большую пропускную способность, чем реализация Json.

Альтернативой будет то, что ваш скрипт вернет Json и создаст ваш HTML-код на клиенте с помощью DOM-манипуляции.

$.post('/Url/', data, function(x) { 
    var elm = document.createElement('div'); 
    elm.appendChild(document.createTextNode(x.comment); 
    $('div#loader').append(elm); 
}, "json"); 

Это использует меньшую пропускную способность, чем возврат HTML, но будет сложнее создавать/поддерживать, если HTML изменяется.