Question

我正在尝试使用dtext01类在div之后添加一个新的div，但它不起作用。以下是类<div class="dtext01"></div>中div的外观，我希望最终代码看起来像<div class="dtext01"></div><div id="rewards">Testing!!!</div>

这是我尝试过的代码没有成功。

<script type="text/javascript">
var stickyNode = document.createElement("div");

stickyNode.innerHTML = 'Testing!!!';

stickyNode.id = "rewards";
var referenceNode = document.getElementByClass("dtext01");
referenceNode.parentNode.insertBefore(stickyNode, referenceNode);
</script>

Answer 1

没有document.getElementByClass()。有document.getElementsByClassName()和querySelectorAll()可用于className提取元素，但它们不是浏览器的标准。

您始终可以从可靠的来源导入跨浏览器getElementsByClassName，例如this one，或者自己编写 - 或者如果您有选择，只使用ID而不是类。

Answer 2

您要查找的功能是document.getElementsByClassName（请注意元素上的复数形式）。这是HTMLElement interface的最新添加内容，因此您应该测试它并在不支持的情况下提供后备。

要在返回第一个节点后附加div，请使用：

var referenceNode;
if (document.getElementsByClassName) {
    referenceNode = document.getElementsByClassName("dtext01")[0];
} else {
    // fallback to some other function
}

// Make sure you got a node before trying to call methods on it
if (referenceNode) {
    referenceNode.parentNode.insertBefore(stickyNode, referenceNode);
}

在另一个之后添加一个新的div

2 个答案: