Question

因此，我尝试在成功进行AJAX调用时追加一个div，该div中嵌套了几个其他元素。我正在尝试附加以下内容：

<div class="comment-flexbox">
    <div class="comment-container">
        <a href=''>
            <img class='comment-picture' src=''>
        </a>
    </div>
    <div class="comment-info-container">
        <p></p>
    </div>
</div>

目前我只有这个：

$('.post-comment').on('click', function(event) {
    event.preventDefault();
    var userId = $("input[name=user_id]").val();
    var imageId = $("input[name=image_id]").val();
    var comment = $("textarea[name=comment]").val();

    $.ajax({
        method: 'POST',
        url: urlComment,
        data: {
            userId: userId,
            imageId: imageId,
            comment: comment,
            _token: token
        }
    }).done(function(response) {
        var commentsCount = response.image.comments;
        $("textarea[name=comment]").val("");
        $('.comments-container').append('<div class="comment-flexbox"></div>');
        $('.comments-count').html("<i class='far fa-comments fa-fw'></i>" + commentsCount + " Comments")
    })
});

有关如何实际附加更复杂的结构的任何提示，指针或文档？

Answer 1

第一：在comment-container内的HTML代码comment-flexbox和done()中，您试图将comment-flexbox附加到comment-container？ !!我不知道哪个是正确的

2nd：您可以使用html创建变量

var AppendHtml = '<div class="comment-flexbox">' +
                   '<div class="comment-container">' +
                      '<a href="">' +
                         '<img class="comment-picture" src="">' +
                      '</a>' +
                   '</div>' +
                   '<div class="comment-info-container">' +
                     '<p></p>' +
                   '</div>' +
                 '</div>';

// to concatenate the variable you can use

'<img class="comment-picture" src=" ' + Image_Source + ' ">' +

注意：请注意单引号和双引号single> double> single ...或double> single> double ...并串联用外引号

如何追加一个具有其他嵌套元素的div？

1 个答案: