11/40 - Setting the Value of XML Objects

11 Days into a 40-day challenge to learn XML. We continue our exploration of the XML DOM and its functions, This post explores setting attributes and values. To add objects into my XML DOM, we use the .setAttribute and .appendChild tags. You can see this visually in the XML Tree from an earlier post.

User Interactions 101 - The Form

The last post explored parsing an array of XML Elements from a list and filtering the list with arguments attached to the .getElementByID function. Today, you can view the ability to easily add additional information to the list using the code below:

• setAttribute

const newCar = xmlDoc.createElement("car");
newCar.setAttribute("id", cars.length + 1); // Assign a new id
newCar.setAttribute("type", type);

After creating the first one, it becomes very easy to expand on something like a form. For example, the form that appears after clicking the button below uses an append feature to add content to a list.

• appendChild

const makeElem = xmlDoc.createElement("make");
makeElem.textContent = make;
newCar.appendChild(makeElem);

Deeper in a web development role, think of the sitemap. A document consisting of all your website URLs that tells the browser where to go when users navigate your website. Or updating a simple list on the front end, like the example below.