Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – how to add html with document.getElementsByClassName

I need half and sleeve(dt, dd) display one line, and color, design is each lines.

so I want add html(hr) after second dd, but not working

and I working with woocommerce, so I want to edit it in the admin panel(editing pages menu) where possible.

can I get the solution?

<script>
function myFunction() {
document.getElementsByClassName('variation-item')[1].innerHTML = '<hr/>';
}
</script>

<dl class="variation">
    <dt class="variation- variation-title">half:</dt>
    <dd class="variation- variation-item variation-01_S"><p>01_S</p></dd>
    <dt class="variation- variation-title">sleeve:</dt>
    <dd class="variation- variation-item variation-01_S"><p>01_S</p></dd>
    <dt class="variation- variation-title">color:</dt>
    <dd class="variation- variation-item variation-01_NONE"><p>01_NONE</p></dd>
    <dt class="variation- variation-title">design:</dt>
    <dd class="variation- variation-item variation-02_DESIGN"><p>02_DESIGN</p></dd>
</dl>
Tags:

2

Answers


  1. 0

    You can try this:

    Object.prototype.insertAfter = function (newNode) {
    this.parentNode.insertBefore(newNode, this.nextSibling);
}

var nodeToInsert = document.createElement("hr");
document.getElementsByClassName('variation-item')[1].insertAfter(nodeToInsert);
    <dl class="variation">
    <dt class="variation- variation-title">half:</dt>
    <dd class="variation- variation-item variation-01_S"><p>01_S</p></dd>
    <dt class="variation- variation-title">sleeve:</dt>
    <dd class="variation- variation-item variation-01_S"><p>01_S</p></dd>
    <dt class="variation- variation-title">color:</dt>
    <dd class="variation- variation-item variation-01_NONE"><p>01_NONE</p></dd>
    <dt class="variation- variation-title">design:</dt>
    <dd class="variation- variation-item variation-02_DESIGN"><p>02_DESIGN</p></dd>
</dl>

    Javascript insertAfter()

    There is no Node.insertAfter() DOM function in Javascript, but it is clearly something that developers would like.

    You can also check document.createElement() and Node.insertBefore()

    Login or Signup to reply.
  2. 0

    Using insertAdjacentElement() with afterend position

    var hr = document.createElement("hr");
document.getElementsByClassName('variation-item')[1].insertAdjacentElement('afterend', hr);
    <dl class="variation">
    <dt class="variation- variation-title">half:</dt>
    <dd class="variation- variation-item variation-01_S"><p>01_S</p></dd>
    <dt class="variation- variation-title">sleeve:</dt>
    <dd class="variation- variation-item variation-01_S"><p>01_S</p></dd>
    <dt class="variation- variation-title">color:</dt>
    <dd class="variation- variation-item variation-01_NONE"><p>01_NONE</p></dd>
    <dt class="variation- variation-title">design:</dt>
    <dd class="variation- variation-item variation-02_DESIGN"><p>02_DESIGN</p></dd>
</dl>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search