Making an ordered list in Javascript using document.write()

In JavaScript, there's usually more than one way to achieve a goal. Below, I show a different approach than using document.write().

Links to documentation for the APIs used below:

• Document.createElement()

• Node.textContent

• Node.appendChild()

• for...of loop

// Start with the steps strings in an array:
const steps = [
  'Reduce spending on non-necessities.',
  'Use extra money to pay off debt. Starting with highest-interest credit cards.',
  'Continue paying off debts until you are debt free.',
  'Put a fixed percent of your pay aside every payday.',
];

// Create a list element:
const orderedList = document.createElement('ol');

// Repeat the following code block once for every step:
for (const step of steps) {
  // Create a list item element:
  const listItem = document.createElement('li');
  // Set the text content of the list item to the step text:
  listItem.textContent = step;
  // Add the list item to the list:
  orderedList.appendChild(listItem);
}

// Add the list to the target div:
document.getElementById('steps-info').appendChild(orderedList);

<div id="steps-info">
  <h2>Steps:</h2>
</div>

A note about document.write() from MDN:

⚠️ Warning: Use of the document.write() method is strongly discouraged.

As the HTML spec itself warns:

This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string "<plaintext>" or "<!--"). In other cases, the call can clear the current page first, as if document.open() had been called. In yet more cases, the method is simply ignored, or throws an exception. Users agents are explicitly allowed to avoid executing script elements inserted via this method. And to make matters even worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.

Therefore, avoid using document.write() — and if possible, update any existing code that is still using it.