Can add an element programmatically?

UXP Developer Tool
1

Hi,
Can I add elements to the DOM programmatically?
I want to add a specific section multiple times.
If yes, how do I do that?

2

look up documentation for the DOM API. for example, document.createElement() → element.appendChild(). if you’re gonna be mutating the DOM regularly, though, you might want to use a UI library like React

3

As @catte mentioned, you can use the document.createElement() function to create an element, you canbuild your own UI without the need to use HTML or CSS, nevertheless it will be a little bit more of work but if you have a style for your plugins, you can create your own library.

Example on how to populate a section with multiple items:

// Here you create your section element, can be a "div", "span", etc, whatever the DOM lets you.
const section_A = document.createElement("div");

// Here you simplify the style into a constant;
const style = section_A.style;
// Here you define the stlye of the section, this is just and example:
style.width = "100%";
style.height = "auto";
style.padding = "10px";
style.border = "1px solid #555";

// Here I'm creating a "red item" HTML element to add into the array that I want to
// use to populate the "section" HTML element.
const itemRed = createItem("red");
const itemGreen= createItem("green");
const itemBlue= createItem("blue");

// This is the array of items that we are passing to the 
// populateSectionWithItems() function
const itemsArray = [itemRred, itemGreen, itemBlue];

// Here use the function to populate the desired section with the desired items
populateSectionWithItems(section_A, itemsArray,);




//// Custom UI functions /////****************************/////

// This function creates an "item" HTML element that need s "color" argument for each item
async function createItem(color) {
   // Here I create the HTML element for the item
   const box = document.createElement("div");
   // Store the HTML element style into a constant
   const css = box.style;
   // Add properties tot he HTML element style depending on how your item will be
   css.width = "20px";
   css.height = "20px";
   css.backgroundColor = color;
   return box;
}

// This function takes a "section" that is the HTML element 
// you want to populate with items and then takes the 
// "itemsArray" which is an array of the items you want to add 
// into the section
async function populateSectionWithItems(section, itemsArray) {
  itemsArray.forEach(item => {
      section.appendChild(item);
  });
}

This is something simple but It can get very complex and once you have setup your custom UI elements, it is all about playing with it.

Hope this can be helpful for you.

4

Thank you for this detailed example.
I guess I can’t use php…

Any idea how i can add an item like this:

        <sp-checkbox class="cb_display" id="cbXXX" checked >Display</sp-checkbox>
        <sp-checkbox class="cb" id="cbMaskXXX" checked >Mask </sp-checkbox>
        <sp-button  id="btnXXX" size="s" class="Action">Color Match</sp-button>
      </div>

Where XXX is the unique identifier for each item I add programmatically.

1 Like
5

This is what I ended up with:

function autoAdd_R4M()
{
	var temp = "";
	for(i = 0; i < actionObject_R4M.length; i++)
	{
		temp += 
        '<div class="myLine">' +
        '<sp-checkbox class="cb_display_R4M" id="cb' + actionObject_R4M[i].name + 'Display_R4M" checked >Display</sp-checkbox>' + 
        '<sp-checkbox class="cb_R4M" id="cbMask' + actionObject_R4M[i].name + '_R4M" checked >Mask </sp-checkbox>' +
        '<sp-button  id="btn' + actionObject_R4M[i].name + '_R4M" size="s" class="R4M_Action">' + actionObject_R4M[i].caption + '</sp-button>' +
        '</div>';
        ;
	}
	document.getElementById("autoAdd_R4M").innerHTML = temp; 
}

autoAdd_R4M();
1 Like