jquery检查父元素中是否包含特定文本，如果是，则在特定预先存在的子元素之后添加子元素

Question

I'm working on a product box that has the products price, in-stock status, etc. The product box has multiple child elements within the parent element and within each child element, theirs a sub-child element that has a span element with text. I'm not sure what jquery code or javascript code I need to specify the condition that if this product box DOES NOT CONTAIN a product status within it, then add this NEW child element with text after the child element price container

So far I tried .has .find and :contains but they all select all product boxes that has those element/Id/class conditions and applies it even though i specify that only those without this existing text should have this new element with text applied.

General format of what I'm wroking with example:

    <div class="product-box-container">
        <h5 class="product-title">
           <a class="product-name">This Watch Name</a>
        </h5>
        <p class="product-id">ABCD-123</p>
        <div class="price-container">
          <span class="product-price">$29.99</span>
        <div class="availability-status">
          <span class="product-status">In Stock</span>
        </div>
        <div class="view-product">
          <a><span>View Product</span></a>
        </div>
    </div>

NOTE: I'm working with multiple product boxes within one page and a lot of them have the same class/Id names. I'm focusing on those without a product status and adding to them. Only way to differentiate them is by identifying the text within the product box container element and using that to apply specific conditions to certain boxes with particular text.

END RESULT

Product box with no product status before solution:

        <div class="product-box-container">
            <h5 class="product-title">
               <a class="product-name">This Watch Name</a>
            </h5>
            <p class="product-id">ABCD-123</p>
            <div class="price-container">
              <span class="product-price">$29.99</span>
            </div>
            <div class="view-product">
              <a><span>View Product</span></a>
            </div>
        </div>

Product box WITH added new child element:

        <div class="product-box-container">
            <h5 class="product-title">
               <a class="product-name">This Watch Name</a>
            </h5>
            <p class="product-id">ABCD-123</p>
            <div class="price-container">
              <span class="product-price">$29.99</span>
            </div>
            <div class="availability-status">
              <span class="product-status">Custom Order</span>
            </div>
            <div class="view-product">
              <a><span>View Product</span></a>
            </div>
        </div>

#1 Method tried:

/*First i have to make sure it only applies this code to a web page that has view product button/class cause only the pages that have product boxes has view product button/class*/
if ($('span:contains("View Product")').length >0) {
  /*trying to find specific product boxes that do not have product-status by 
  using its product-id text*/
  if ($('div.product-box-container').has('p:contains("ABCD-123")').length >0){
    $('div.price-container').after('<div class="availability-status"><span class="product-status">Custom Order</span></div>');
  }
}

#2 Method tried

/*specifying to apply only to web pages with view product*/
if ($('span:contains("View Product")').length >0) {
  /*applying the NEW child element first to everything*/
  $('div.price-container').after('<div class="availability-status"><span class="product-status">Custom Order</span></div>');
  /*then deleting the NEW child element from any product boxes that has the In 
  Stock text within it*/
  if ($('div.product-box-container').has('span:contains("In Stock")').length >0) {
    $('div.availability-status').css('display','none');
  }
}

Answer 1

1. Find all the boxes
2. Filter out the ones that do have an availability-status
   1. Find the view-product nested in the remaining boxes
   2. Insert the custom html before the view product

 $('.product-box-container') .filter(function(){ return $(this).find('.availability-status').length < 1; }) .find('.view-product') .before(` <div class="availability-status"> <span class="product-status">Custom Order</span> </div> `);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-box-container"> <h5 class="product-title"> <a class="product-name">This Watch Name</a> </h5> <p class="product-id">ABCD-123</p> <div class="price-container"> <span class="product-price">$29.99</span> </div> <div class="view-product"> <a><span>View Product</span></a> </div> </div> <div class="product-box-container"> <h5 class="product-title"> <a class="product-name">This Watch Name</a> </h5> <p class="product-id">ABCD-123</p> <div class="price-container"> <span class="product-price">$29.99</span> </div> <div class="availability-status"> <span class="product-status">In Stock</span> </div> <div class="view-product"> <a><span>View Product</span></a> </div> </div>