I run wordpress website and I want to add the following elements between specific elements using JavaScript.
<div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative"></div>
However, no matter how many hours I look at numerous examples on the internet and follow along, the div element is not added...
Website structure is
<div class="woocommerce-billing-fields__field-wrapper">
<p class="billing_postcode_find_field">..
<span class="woocommerce-input-wrapper">...
</span>
</p>
<div id="wrap" ..> </div> <- want to put div here
<p class="billing_address_1_field">
<span class="woocommerce-input-wrapper">
And
i tried below codes.
document.body.onload = addElement;
function addElement () {
var newDiv = document.createElement("div");
var currentDiv = document.getElementById("warp");
document.billing_address_1_field.insertBefore(newDiv, currentDiv);
}
or
<script>
let newDiv = document.createElement("div");
newDiv.setAttribute("id", "wrap");
let par = document.getElementsByClassName("billing_postcode_find_field")[0];
par.appendChild(newDiv);
</script>
Could someone please let me know what am I missing?
Website link is [here][1]
Thank you. [1]: https://seoartgallery.com/test5/?page_id=15/?add-to-cart=34&quantity%5B1%5D
It looks like you're just trying to add this new element as the first child of the .woocommerce-input-wrapper element. In this case, you can use prepend()
<div class="woocommerce-billing-fields__field-wrapper">
<p class="billing_postcode_find_field">
<span class="woocommerce-input-wrapper">
<p class="billing_address_1_field">
<span class="woocommerce-input-wrapper">this is the span in p tag</span>
</p>
</span>
</p>
</div>
<script>
const parent = document.querySelector('.woocommerce-input-wrapper');
const newDiv = document.createElement('div');
newDiv.setAttribute('id', 'wrap');
newDiv.innerText = `I'm new!`;
parent.prepend(newDiv);
</script>If there were to be an element above the .billing_address_1_field element, then you could use .insertBefore() instead to ensure that it would go in between the elements you want it to:
<div class="woocommerce-billing-fields__field-wrapper">
<p class="billing_postcode_find_field">
<span class="woocommerce-input-wrapper">
<p>i'm a random p tag at the top of the container</p>
<p class="billing_address_1_field">
<span class="woocommerce-input-wrapper">this is the span in p tag</span>
</p>
</span>
</p>
</div>
<script>
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.innerText = `I'm new!`;
parent.insertBefore(newDiv, billingField1);
</script>