javascript - 如何使用 document.getElementsByClassName 添加 html

Question

我需要half和sleeve(dt,dd)显示一行，颜色，设计是每一行。

所以我想在第二个 dd 之后添加 html(hr)，但不起作用

并且我与 woocommerce 合作，因此我想尽可能在​​管理面板(编辑页面菜单)中对其进行编辑。

我能得到解决方案吗？

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

Answer 1

你可以试试这个:

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.

您还可以查看document.createElement()和 Node.insertBefore()