Append HTML to div if it doesn't exist

Question

I need to check whether an element exists or not, and if it doesn't, then create it using Jquery. For example, I have the following HTML code in my page:

<div class="g-array-item">
        <div class="g-array-item-image">Awesome Picture</div>
        <div class="g-array-item-somethingelse">Something else</div>
</div>

<div class="g-array-item">
        <div class="g-array-item-somethingelse">Something else</div>
</div>

I need g-array-item-image class div to be inside both g-array-item class divs.

This is what I tried so far without success:

if(jQuery(".g-array-item-image").length < 0 ){  
jQuery( '.g-array-item' ).append( jQuery( '<div class="g-array-item-image">123</div>' ) );
}

Desired result:

<div class="g-array-item">
        <div class="g-array-item-image">Awesome Picture</div>
        <div class="g-array-item-somethingelse">Something else</div>
</div>

<div class="g-array-item">
        <div class="g-array-item-image">Awesome Picture</div>
        <div class="g-array-item-somethingelse">Something else</div>
</div>

Answer 1

here is the full code :

<div class="g-array-item">
        <div class="g-array-item-image">Awesome Picture</div>
        <div class="g-array-item-somethingelse">Something else</div>
</div>

<div class="g-array-item">
        <div class="g-array-item-somethingelse">Something else</div>
</div>


<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.g-array-item').each(function(){
        if($(this).find('.g-array-item-image').length == 0){
            $(this).prepend('<div class="g-array-item-image">123</div>');
        }
    });
});
</script>

You need here to use prepend instead of append otherwise it'll pop the image div after your item-something.