appendChild Workaround (Javascript, HTML, CSS)

I'm looking for a workaround to the appendChild() function. Hoping someone can help me out here!

We're currently using a code block on our Squarespace site, which integrates HTML, CSS, and Javascript. Briefly, the point of the page is to display information pulled from a secure database. The code in question uses a number of HTTP methods: both GET and PATCH methods, at different points. The GET method (called in Javascript) reads in the number of cases that need to be displayed on the page. Based on that number of cases, we want to create the corresponding number of HTML elements (n number of headers, 2*n number of buttons, etc).

Right now, the code calls the GET method and stores information on each case in the resultant array. The length of that array is the number of cases, and that's what we iterate to in our for loop. We then create the necessary headers and buttons using the .createElement() method and add them to HTML using the .appendChild() method. This method works outside of Squarespace. However, according to a technical representative, Squarespace doesn't support the use of the appendChild() method, so none of the HTML elements created inside the Javascript for loop actually show up on the page. 

Because we don't know before calling the HTTP GET method, we can't declare the correct number of headers and buttons within the HTML script. 

So! Any workarounds to this restriction on the appendChild method?

Attached is the Javascript and HTML codes currently in use. (Some information, such as URLs and authorizations, have been redacted for confidentiality purposes, but the skeleton structure of the code is still there.) 

Any thoughts are much appreciated! 

Hi @nmilc

I don't believe there's an issue using appendChild, just the way you're trying to create a document inside a code block and then append elements into it.

I'd recommend adding a placeholder element into the code block to add these items into.

Restructure your code to look like this:

<h1>Results: </h1>
<div class="results"></div>
 
<script src="jquery-3.6.0.js"></script>
<script>
// Initialization clear
console.clear();
 
// GET SECTION: Retrieves and populates information on available cases
const getSettings = {
  "async": true,
  "crossDomain": true,
  "url":
  "method": "GET",
  "headers": {
    "Content-Type": "application/json",
    "Authorization":
  }
};
 
// PATH SECTION, TAKE: Takes opportunity when button is clicked
const claimSettings = {
  "async": true,
  "crossDomain": true,
  "method": "PATCH",
  "headers": {
    "Content-Type": "multipart/form-data",
    "Authorization":
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
};
 
// PATCH SECTION, RELEASE: Releases opportunity when button is clicked
const releaseSettings = {
  "async": true,
  "crossDomain": true,
  "method": "PATCH",
  "headers": {
    "Content-Type": "multipart/form-data",
    "Authorization":
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
};
  
$.ajax(getSettings).done(function (response) {

  const results = document.querySelector(".results")

  // Iterates through each of the cases
  let numCases = response.results.length;
 
  for (let i = 0; i < numCases; i++) {
   
    // Populates array of case numbers
    idArray[i]=response.results[i].id.raw_value;
 
    // Creates basic HTML elements on page
    let nameEl = document.createElement("h2");
    nameEl.innerHTML = "Case Number: " + idArray[i];
    let lpcEl = document.createElement("h3");
    let availEl = document.createElement("h3");
    let descripEl = document.createElement("h4");
 
    let claimBtn = document.createElement("button");
    let releaseBtn = document.createElement("button");
   
    // Adds all relevant HTML elements to document
    results.appendChild(nameEl);
    results.appendChild(availEl);
    results.appendChild(lpcEl);
    results.appendChild(descripEl);
    results.appendChild(claimBtn);
    results.appendChild(releaseBtn);
  }
})
</script>

Let me know how that goes!

Hey, thanks so much for taking a look at this! I gave it a shot, adding the div class results and appending the buttons there instead of to the document body, but no luck. 

Anything else I might be able to try? 

For the HTML section: 

<body>
    <h1>NMILC Pro Bono Opportunities</h1>
  <div class="results"></div>
  
    <script src = "jquery-3.6.0.js"></script>

...

</body>

For the output section in the JS code: 

    // Adds all relevant HTML elements to document
    results.appendChild(nameEl);
    results.appendChild(availEl);
    results.appendChild(descripEl);
    results.appendChild(claimBtn);
    results.appendChild(releaseBtn);

On 6/1/2022 at 2:22 AM, nmilc said:

Hey, thanks so much for taking a look at this! I gave it a shot, adding the div class results and appending the buttons there instead of to the document body, but no luck. 

 

Anything else I might be able to try? 

 

For the HTML section: 

<body>
    <h1>NMILC Pro Bono Opportunities</h1>
  <div class="results"></div>
  
    <script src = "jquery-3.6.0.js"></script>

...

</body>

 

For the output section in the JS code: 

    // Adds all relevant HTML elements to document
    results.appendChild(nameEl);
    results.appendChild(availEl);
    results.appendChild(descripEl);
    results.appendChild(claimBtn);
    results.appendChild(releaseBtn);

@nmilc I can't really troubleshoot much further without seeing the code you're adding to your site, feel free to pm me a link if you can and I'll take a look!