How to put pre-existing text in an ordered list?

August 15, 2022

I have some pre-existing recipe ingredients that I want to put into an order list in the HTML file. Like the list below, is there a way to put each ingredient into the list without manually copy and pasting it one by one? I am currently trying to use emmet abbreviations and so far I tried ol>li*13> ["paste in the ingredients"] it does not work.

e.g.

Sticky Garlic Shrimp

salt
pepper
sesame seeds
lemon slices
cooked brown rice (to serve)
1 tablespoon reduced-sodium soy sauce
1 teaspoon fresh ginger, minced
1 tablespoon olive oil
1 spring onion
1/4 teaspoon crushed chili flakes (optional)
3 cloves of garlic, minced
3 tablespoons honey
1400g uncooked shrimp, peeled & deveined

and I want it in the following:

salt
pepper
sesame seeds
etc

>Solution :

Yes, you can do it by looping through your array in JavaScript, and appending them one by one:

Create an HTML element for your list:

<div id="food_div"></div>

JavaScript at the bottom of the HTML file:

var food_items = ["salt", "pepper""]
var str = '<ul>'

food_items.forEach(function(el) {
   str += '<li>'+ el + '</li>';
}); 

str += '</ul>';
document.getElementById("food_div").innerHTML = str;