如何为所有class为onbackorder的元素批量执行appendChild操作

• 第一个问题：document.querySelector(".onbackorder") 仅会返回文档中第一个匹配类名的元素，自然只能给单个元素添加子节点
• 第二个问题：同一个DOM节点调用appendChild插入到多个父元素时，节点会被移动而非复制，因此即使你遍历所有匹配元素直接复用同一个first节点，最终也只会在最后一个元素上看到这个节点

<script>
// 封装节点创建逻辑，避免重复编写冗余代码
function createBackorderTip() {
    var tip = document.createElement("p");
    var text = document.createTextNode("On backorder");
    tip.appendChild(text);
    return tip;
}

// 获取所有匹配类名的元素
var backorderElements = document.getElementsByClassName('onbackorder');
// 遍历所有匹配元素逐个添加节点
for (var i = 0; i < backorderElements.length; i++) {
    // 每次插入都创建全新的节点，避免节点被移动的问题
    backorderElements[i].appendChild(createBackorderTip());
}
</script>

如果你项目的兼容性要求允许使用ES6+语法，可以用更简洁的写法实现同等效果：

<script>
document.querySelectorAll(".onbackorder").forEach(el => {
    const tip = document.createElement("p");
    // textContent 可直接替代手动创建文本节点再追加的操作，功能等价
    tip.textContent = "On backorder";
    el.appendChild(tip);
});
</script>

内容的提问来源于stack exchange，提问作者Giacomo