Adding multiple Dom Nodes in Content

Question

I am using a popup on my mapView from arcGIS API for Javascript 4.17. When the user opens the popup, I have set the following attributes:

    view.popup.open({
        // Set the popup's title to the coordinates of the clicked location
        title: "Location Coordinates: [" + lon + ", " + lat + "]",
        location: event.mapPoint, // Set the location of the popup to the clicked location
        content: setContentInfo(view.center, view.scale),
        actions: [risk_snapshot, ble_report, print_report, lidar_report]
    });

In the popup, I am adding some smaller maps using a function called setContentInfo that returns a "masterDiv" DOM node with the maps. However, I want to add an additional DOM Node outside of that div to the content. The function is essentially setup as below. How can you add multiple items -DOM Nodes to content?

function setContentInfo(center, scale) {
    var popupDiv1 = document.createElement("div");
    popupDiv1.classList.add("mapViewLeft");

    var popupView1 = new MapView({
        container: popupDiv1,
        map: map,
        actions: [],
        center: view.center,
        zoom: view.zoom,
        scale:
            view.scale *
            2 *
            Math.max(view.width / 250, view.height / 250),
        constraints: {
            rotationEnabled: false
        },
        ui: {
            components: []
        }
    });

    var popupDiv2 = document.createElement("div");
    ...

    var popupMasterDiv = document.createElement("div");
    popupMasterDiv.id = "masterDiv";
    popupMasterDiv.style.width = "650px";
    popupMasterDiv.style.height = "450px";
    var theDiv = document.getElementById("masterDiv");
    popupMasterDiv.appendChild(popupDiv1);
    popupMasterDiv.appendChild(popupDiv2);
    
    // Return a dom node
    //return popupView.container;
    return popupMasterDiv;
}

To test, I have tried adding var test = document.createElement("div"); test.textContent = "Hey"; and then adding

   popupMasterDiv.appendChild(popupDiv1);
   popupMasterDiv.appendChild(popupDiv2);
   popupMasterDiv.appendChild(test);

but it puts the "Hey" in the middle of the 2 maps. I also tried adding the above straight to the content like this:

  content: setContentInfo(view.center, view.scale) + test,

But that removes the map content and only displays "Hey"

What I want is to add a nice little table in its own div under the maps with something like this. What am I doing wrong here; how can I achieve this:

var table1 = "<table id="info">
                <tr>
                  <th>Location</th>
                  <th>        </th>
                </tr>
                <tr>
                  <td>Coordinates</td>
                  <td>Parcel ID</td>
               </tr>
               <tr>
                 <td>123.345, -43.432</td>
                 <td>12345</td>
               </tr>
             </table>" 

Answer 1

I was able resolve this quite simple using the following:

 var table_1 = document.createElement("div");
    table_1.id = "table1";
    table_1.innerHTML = "<div id='table1' style='border-style: single; padding:5px; font-family:CalciteWebCoreIcons; margin-top: 10px;'>" +
        "<table width=100%>" +
        "<tr width=100%>" +
        ...
        "</tr>" +
        "</table>" +
        "<hr class='rounded'>";

and then adding the new table1 div node to the master div using appendChild:

 var popupMasterDiv = document.createElement("div");
 popupMasterDiv.id = "masterDiv";
     ...
 popupMasterDiv.appendChild(table_1);

The trick is to create a DOM node for the table before appending it to the masterDiv.