How do I get values from modal input fields and dynamically insert them into HTML with javascript?

See more:

Javascript

DOM

modal

I am writing a simple one page app that demonstrates dynamic insertion of DOM elements in a table, and have run into a problem. I have captured all necessary DOM nodes needed for the business logic.

The table contains the name, location of origin and average lifespan of the user's favorite dog breeds.

To do this I use a modal dialogue with the following fields:

Breed
Origin
Lifespan

What I have tried:

To do this, I built the following modal dialogue in HTML:

<div id="modal" class="dialogue invisible">
    <div id="modalHead" class="headContent">
      <div id="xButton">×</div>
    </div>
    <div id="modalContent">
      <h1>enter details for your favorite breed</h1>
      <hr />
      <div id="modalInputs">
        <label for="breedName">breed:</label>
        <input type="text"
         name="breedName"
         id="breedName"
         placeholder="enter your favorite breed"
        />
        <label for="origin">origin:</label>
          <input type="text"
           name="origin"
           id="origin"
           placeholder="enter place of origin"
          />
          <label for="avgLifeSpan">average lifespan:</label>
          <input type="text"
           name="avgLifeSpan"
           id="avgLifeSpan"
           placeholder="e.g. 12-15 years"
          />
      </div>
      <hr id="bottom" />
    </div>
    <div id="modalFoot">
      <button type="submit" id="submitBreed">
        submit your breed
      </button>
      <button type="reset" id="reset">
        cancel
      </button>
    </div>
  </div>

To extract the data from the modal's input fields, I tied an event listener to the "submit your breed" button in the above modal, with the following callback function:

const getBreedValues = () => {
  const breedValues = [];
  breedValues.push(modalBreed.value);
  breedValues.push(modalOrigin.value);
  breedValues.push(modalLifeSpan.value);
  return breedValues;
};

modalBreed, modalOrigin and modalLifeSpan are, as you might imagine DOM node objects I defined for each of the text fields in the modal using the getElementById() method.

Though I have been able to log the above values to the console, I have not been able to dynamically insert these values into a table row to be added to the table of dog breeds.

I have left out the code of this table and my attempts in Javascript to do this insertion for brevity. If this code is needed, I can add it later for reference.

Any assistance you can provide on this is greatly appreciated.