How can I add a fieldset in a form?

How can I add a fieldset to my form? I know how to delete it, but how can I add it?

I found this code from w3schools and I am trying to apply it to my from.

<!DOCTYPE html>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

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

const para = document.createElement("p");
const node = document.createTextNode("This is new.");
const element = document.getElementById("div1");


The function I wrote is this one, but doesn’t seem to be adding the fieldset.

function doublePumpf(){
  if(document.getElementById ("pump2").checked) {
    const secondPinfo = document.getElementById ("fieldsetpump2"); 
    const para = document.createElement ("p");
    const element2 = document.getElementById("parentfieldset");

The input that needs to be clicked is this one:

<input type="radio" name="pumpselect" id= pump2 value="doublePump" onclick = "doublePumpf()">
  <label for="pump2"> Double Pump</label><br>

And the fieldset that needs to be added is this one:

<fieldset id = fieldsetpump2>
         <h4> <u>  Second stage pump. </u> </h4> 
  <label for="gpmPump2" style= "margin-bottom:20px">* GPM (second stage): </label>
  <input type="number" id="gpmPump2" style = "bottom-margin:3px" name="gpmPump2" placeholder = "GPM required" required ><br>
  <label for="pressure2" style= "margin-bottom:20px"> * Pressure (psi):</label>
  <input type="number" id="pressure2" name="pressure2" placeholder = "Max Cont. pressure 2" required> <br>
    Type for second stage pump.
  <input type="radio" name="p2type" value="p2fixed" checked>
  <label for="p2fixed"> Fixed displacement </label>
  <input type="radio" name="p2type" value="p2variable">
  <label for="p2variable"> Variable displacement</label><br> 
  <fieldset id = p2controlselect> 
    Controls for variable displacement second stage pump
  <input type="radio" name="p2control" value="p2pressurecomp" checked>
  <label for="p2pressurecomp"> Pressure Compensated </label>
  <input type="radio" name="p2control" value="p2loadsensing">
  <label for="p2loadsensing"> Load Sensing</label><br>
  <input type="radio" name="p2control" value="p2pressurecompwithremote">
  <label for="p2pressurecompwithremote"> Pressure Compensated with Remote Control </label>
  <input type="radio" name="p2control" value="p2hplimiter">
  <label for="p2hplimiter"> HP Limiter </label><br> 
   <input type="radio" name="p2control" value="p2other">
  <label for="p2other"> Other (please comment in notes below) </label><br> <br>

Codepen :


Trying to troubleshoot it in the Google console and getting this error:

Uncaught TypeError: Cannot read properties of null (reading ‘remove’)

The error happens after I remove a fieldset and click on the other option, and that other option also has the a function to remove a fieldset that has previously been deleted.

Depending on how the user clicks on the options, some options will have a function to repeat a task that needs to be done.

Anyway, still this doesn’t give any errors from the function of “adding” a field set.

I really don’t mind getting that error, as long I am able to add and remove the proper fieldsets according to the options.


This entire approach to “add” a fieldset won’t work because a fieldset is not a Node type of component.

Maybe I’ll just have to get rid of the fieldsets and get a different approach on this one.