如何追加一个具有其他嵌套元素的div? [英] How to append a div that has other nested elements inside of it?

问题描述

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

So I'm trying to append a div that has a couple of other elements nested inside it on successful AJAX call. I'm trying to append something like:

<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")
    })
});

关于如何实际添加更复杂的结构的任何提示，指针或文档?

Any tips, pointers or documents on how to actually append more complex structures like that?

推荐答案

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

1st: in the html code comment-container inside comment-flexbox and on done() you trying to append comment-flexbox to comment-container?? !! I don't know which is right

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

2nd: you can create a variable with the 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 ...对于串联 用外引号

Note: take care about single and double quotes single>double>single... or double>single>double...and for concatenate use the outer quotes

这篇关于如何追加一个具有其他嵌套元素的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！