时间戳

首页 > 解决方案 > JavaScript | appendChild 到所有类

javascript - JavaScript | appendChild 到所有类

问题描述

我在将 Child 附加到我的文档中的整个类时遇到问题，其中类的名称是“onbackorder”。这是我的代码：

<script>
    var first = document.createElement("p");
    var text = document.createTextNode("On backorder");
    first.appendChild(text);

    var isRequestQuote = document.getElementsByClassName('onbackorder');
    if (isRequestQuote.length > 0) {
        document.querySelector(".onbackorder").appendChild(first);
    }
</script>

此刻函数随机放置选择器。如何在类为“onbackorder”的整个文档中获得相同的选择器。

谢谢

标签： javascript

解决方案

有2点：

  1. document.querySelector(".onbackorder")只是返回第一个项目。所以你需要使用document.querySelectorAll('.onbackorder').

Document 方法 querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，则返回 null。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

  1. var first = document.createElement("p");您必须创建多个引用变量以附加到每个onbackorder项目。因为您不能只创建一个并附加到多个项目。

所以我修改了你的代码并让它工作。你可以在下面检查它：

var first = document.createElement("p");
var text = document.createTextNode("On backorder");
first.appendChild(text);

const allBackOrders = document.querySelectorAll('.onbackorder');
allBackOrders.forEach((item) => {
  var newItem = first.cloneNode(true);
  item.appendChild(newItem);
});
<div class="onbackorder"></div>
<div class="onbackorder"></div>
<div class="onbackorder"></div>

推荐阅读