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!