I have a problem with inserting a specific element using JavaScript.

First of all, my website structure is as follows.

<div class="woocommerce-billing-fields__field-wrapper">
<p id="billing_email_field">..</p>
<p id="billing_country_field">..</p>
<p id="billing_first_name_field">..</p>
<p id="billing_postcode_find_field">..</p>
<p id="billing_address_1_field">....</p>
</div>

I want to add a Wrap element above the billing_address_1_field element.

So I put the Warp element using the code below.

<script>
    //빌링에 wrap 엘리멘트 추가
    const parent = document.querySelector('#woocommerce-billing-fields__field-wrapper');
    const billingField1 = document.querySelector('#billing_address_1_field');

    const newDiv = document.createElement('div');
    newDiv.setAttribute('id', 'wrap');
    newDiv.style.cssText = 'display:black;width:100%;margin:5px 0;';

   parent.insertBefore(newDiv, billingField1);
</script>

However, when using this code, the warp will be placed on top of the div element.

<div class="woocommerce-billing-fields__field-wrapper">
        <div class="wrap"></div>
        <p id="billing_email_field">..</p>
        <p id="billing_country_field">..</p>
        <p id="billing_first_name_field">..</p>
        <p id="billing_postcode_find_field">..</p>
        <p id="billing_address_1_field">....</p>
</div>

Can someone please tell me how i can solve this problem?

I'd like to use insertBefore instead of prepend due to compatibility issues with IE.

Thank you.