javascript - 有没有办法将 insertBefore() 与 getElementsByClassName 而不是 getElementById 一起使用？

Question

我正在编写一些代码来修改我们非营利组织 CMS 上表单的外观。我可以通过添加针对它的自定义 CSS 来更改表单的某些部分（即，将可见性：隐藏属性添加到表单的自动生成元素之一），但我没有办法直接更改基本代码构成表格。我只能建立在它之上。

我正在尝试以某种可折叠的方式封装表单的特定部分，因此默认情况下它不会显示，但可以切换。通常，我只是将该 div 夹在创建可折叠的代码之间，但在这种情况下我不能这样做。相反，我试图做的是找出一种方法来使用 insertBefore() 在表单元素之前和之后添加我需要的 HTML 来解决这个问题。

除了 getElementByID() 之外，insertBefore() 似乎不适用于任何其他元素选择器。我试图定位的表单元素没有 id，只是一个仅适用于该部分的类名（因此在功能上是一个 id），但 getElementsByClassName() 似乎不起作用，我不能修改表单的基本代码添加一个ID。

这是我用来尝试构建它的基本模板（用 div 类替换 div id，用 getElementsByClassName("div1") 替换 getElementById("div1")）。

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

我是否遗漏了什么，或者这不可能/过于复杂？提前致谢！

标签： javascripthtmldom