Как я могу вставить много HTML на страницу с JQuery?

Question

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

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

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

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

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

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

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

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

---

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

альтернативный текст 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.