如何在jQuery中搜索附加的HTML？

Question

I want create somthing like wordpress comment reply form. in WP when you click on reply button a from apear under the reply button. I do appending form after clicking reply button, but my problem is if i click again another form append to container. for handeling this I want search container before append form, if form exist it sholudn't append another one but it seems search wouldn't work for appended html. what's your suggestion for this problem?

$(document).on('click','.reply-btn',function(){
 ...

            var form="<div class='col-xs-12' >"+
                  "<form role='form' method='post'>"+
                    ....
                  "</form>"+
             "</div>";

            var container=$(this).closest('div');

            if(container.html().search(form)<0){
                container.append(form)
            }else{
                alert('it'e also appended') 
            }

        })// .reply-btn

Answer 1

 $(document).on('click','.reply-btn',function(){
            var form="<div class='col-xs-12' >"+
                  "<form role='form' method='post'>"+
                    ....
                  "</form>"+
             "</div>";

            var container=$(this).closest('div');


            if(container.find('form').length <1)
                container.append(form)
            }else{
                alert('it is also appended') 
            }

        });

Answer 2

Your html string and the html returned by the dom structure may not be the same, what you should do is to check whether container has a form like

$(document).on('click', '.reply-btn', function () {


    var container = $(this).closest('div');

    if (container.find('form').length == 0) {
        var form = "<div class='col-xs-12' >" +
            "<form role='form' method='post'>" + ....
            "</form>" +
            "</div>";
        container.append(form)
    } else {
        alert('it\' e also appended ')
    }

})

Answer 3

use find and length to check the element present or not

   if(container.find("form").length){
     // already there
}