Как вставить текст с jQuery (AJAX) в HTML?

166

27 января 2018, 00:19

Подскажите, у меня вот такой HTML (CSS потом вынесу):

 <div id="comments" >
     <a style="color:black; font-size:19px; text-decoration:none" id="showName">
Имя</a>
    <p style="padding:10px; font-size:17px;" id="showComment">
Какой-то текст</p>

Как мне вставить с такими же параметрами в <a>, <p> новый текст через jQuery посредством AJAX, чтобы не перепрописывать к примеру через .html().
Ну то есть, добавляю в бд и у меня сразу эти данные отображаются, а отображаю их через AJAX.
Вот как я предполагал:

$("form").submit(function (event) {
            $.ajax({
                url: 'keepComment.php',
                type: "POST",
                cache: false,
                data: $(this).serialize(),
                success: function (data) {
                   //#name - id одной формы
               $("#comments").append($("#name").val()); //Вот как я пробывал
                    //$("#showComment").append(document.createTextNode($("#comment").val()));
                }
            });
            return false;

Answer 1

Можно хоть так, но стили действительно лучше перенести) И id для каждого взятого комментария сомневаюсь, что нужны.

var name = $("#name").val();
var comment = $("#comment").val();
$("#comments").append(`<a style="color:black; font-size:19px; text-decoration:none">${name}</a>`);
$("#comments").append(`<p style="padding:10px; font-size:17px;">${comment}</p>`);

Answer 2

Я могу только догадываться, что Вам не нравится повторение html-a для тэгов а и p в коде. Это действительно не очень красиво.

Заведите на странице невидимый шаблон:

<div id="template" style="display:none;">
  <a style="color:black; font-size:19px; text-decoration:none">Имя</a>
  <p style="padding:10px; font-size:17px;">Какой-то текст</p>
</div>

А в коде:

var name = $("#name").val();
var comment = $("#comment").val();
var newItem = $($("#template").html());
newItem.find("a").text(name);
newItem.find("p").text(comment);
$("#comments").append(newItem);