I'm writing some code to modify the appearance of a form on our nonprofit's CMS. I'm able to change parts of the form by adding custom CSS targeting it (i.e., adding a visibility:hidden attribute to one of the form's auto-generated elements), but I don't have a way to directly change the basic code that makes up the form. I can only build on top of it.
I'm trying to encase a specific part of a form in some sort of collapsible so it isn't displayed by default but can be toggled. Normally, I'd just sandwich that div in between the code creating the collapsible, but I can't do that in this case. Instead, what I was trying to do was figure out a way to use insertBefore() to add in the HTML I need before and after the form element to get around this.
It doesn't seem like insertBefore() works with any other element selectors besides getElementByID(). The form element I'm trying to target doesn't have an id, just a class name that only applies to that section (so functionally an id), but it doesn't seem like getElementsByClassName() works, and I can't modify the basic code of the form to add an ID.
This is the basic template I'm using to try to structure it (replacing div id with div class, getElementById("div1") with getElementsByClassName("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>
Am I missing something, or is this not possible/overcomplicated? Thanks in advance!
