如何使用 Javascript 将 div 元素放在两个元素之间？

Question

我运行 wordpress 网站，我想使用 JavaScript.

在特定元素之间添加以下元素

<div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative"></div>

然而，无论我在互联网上查看大量示例并按照多少小时进行操作，都没有添加 div 元素...

网站结构为

<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">

和

我尝试了以下代码。

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>

有人可以让我知道我错过了什么吗？

网站 link 位于 [此处][1]

谢谢。 [1]: https://seoartgallery.com/test5/?page_id=15/?add-to-cart=34&quantity%5B1%5D

Answer 1

您似乎只是想将此新元素添加为 .woocommerce-input-wrapper 元素的第一个子元素。在这种情况下，您可以使用 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>

如果在 .billing_address_1_field 元素上方有一个元素，那么您可以使用 .insertBefore() 来确保它位于您想要的元素之间：

<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>

如何使用 Javascript 将 div 元素放在两个元素之间？

How to put div element between the two elements using Javascript?

html

javascript

wordpress

dom