Append div only if it does not contain text JQuery

Question

I am creating a social media website and am trying to make a comment textarea appear when users click on a status.

Here is what I have so far:

 $(".status").click(function (){
    //Check if status div they clicked on contains a textarea already
    if($(this).closest('div').innerHTML.indexOf("<textarea name='status_body'>") == -1) {

        //Append with textarea
        var textarea = "<textarea name='status_body'></textarea>";
        $(this).closest('div').append(textarea);

    }
  });

This was working before I put the if statement in. Of course without the if statement a textarea will be added everytime the user clicks. I would only like for a textarea to appear if there is not one aready.

Another method I tried and failed with is:

if(!$(this).closest('div:contains("<textarea")').length > 0) 

Answer 1

You're close, just check for the existence with .length

if ($(this).closest("div").find("textarea").length > 0) {
    //contains a text area!
} else {
    //Doesnt!
}

Answer 2

Do not search for it as text. You should threat the textarea for what it is, a DOM element.

if($(this).closest('div').find("textarea[name='status_body']").length == 0) {
    /*...*/
}