Javascript, the DOM, and creating elements

I’ve written some javascript code to handle formatting nested lists. There may be a simpler solution, but this is what I have currently. My question is – In designer, is there a way to access the document element of a print context? When I attempt to use document.getElementById for instance, it states that the document is not defined. This makes sense, but I’m wondering if there is a workaround for me to manipulate the given HTML with my script, while at the same time accessing the record set data? I need a simple way to create elements and whatnot dynamically.


let string = “1. this is the first thing 2. this is the second thing a. this is the thing nested in thing 2”

var stringArray = string.split(/([1-9].|[a-z].|[a-z][a-z].)/)
stringArray.shift();
let length = stringArray.length;
let newArray = ;

for(i = 0; i<length; i+=2) {
newArray.push(stringArray[i] + stringArray[i+1]);
}

var list = document.getElementById(“list”);

newArray.forEach(c => {
let split = c.split(‘’);

if(split[0].match(/[1-9]/)) {

var elem = document.createElement("li");
var t = document.createTextNode(c);
elem.appendChild(t);
list.appendChild(elem);

} else if(split[0].match(/[a-hj-z]/)) {
var nextList = document.createElement(“ul”);
var elem2 = document.createElement(‘li’);
var t = document.createTextNode(c);
elem2.appendChild(t);
nextList.appendChild(elem2);
list.appendChild(nextList);
} else if (split[0].match(/i/)) {
var nextList = document.createElement(“ul”);
var nextList2 = document.createElement(“ul”);
var elem2 = document.createElement(‘li’);
var t = document.createTextNode(c);
elem2.appendChild(t);
nextList.appendChild(elem2);
nextList2.appendChild(nextList);
list.appendChild(nextList2);
}
});

Desired output, which my javascript achieves but not with Designer:

  1. this is the first thing
  2. this is the second thing
    a. this is the thing nested in thing 2

Most of this is handled by special methods in Connect. For example, to get an element by ID, you’d use Query

http://help.objectiflune.com/en/planetpress-connect-user-guide/2018.1/#designer/API/query.htm

Inserting elements into the DOM would be done via the results object:

http://help.objectiflune.com/en/planetpress-connect-user-guide/2018.1/#designer/API/results_Object.htm%3FTocPath%3DTemplate%2520Design|Script%2520API|Designer%2520API|results|_____0

This was my solution to solve my problem:

let string = record.fields.technicalSummary;

var stringArray = string.split(/([1-9].|[a-z].|[a-z][a-z].)/);

stringArray.shift();

stringArray.forEach(function(c) {logger.info(c);});

let length = stringArray.length;

let newArray = ;

for(i = 0; i" + c + “”);

} else if(split[0].match(/[a-hj-z]/)) {

logger.warn(c);

builtElement += query(“#technicalList”).add(“” + c + “”);

} else if (split[0].match(/i/)) {

builtElement += query(“#technicalList”).add(“” + c + “”);

}

});

results.html(builtElement);