¿Puede alguien ayudarme a crear una lista dinámica con Href? Solo sé cómo agregar una lista, pero no sé cómo agregar enlaces para cada lista.
<h1>Toppings</h1> <ul> </ul> <script> var toppings = ['tomatoes', 'olives', 'cheese', 'peperonies'] </script>Ahora quiero tener una lista dinámica con enlaces, no solo una lista. Alguien me puede ayudar.
Debe crear una etiqueta de anclaje dentro de un elemento de la lista para cada ingrediente y agregarlo a su lista desordenada.
<h1> Toppings </h1> <ul id="toppings-list"> </ul> <script> let toppings = ['tomatoes', 'olives', 'cheese', 'peperonies']; const toppingsList = document.querySelector('#toppings-list'); toppings.forEach(topping => { const listItem = document.createElement('li'); const link = document.createElement('a'); link.setAttribute('href', topping); link.innerText = topping; listItem.appendChild(link); toppingsList.appendChild(listItem); }); </script>La forma tradicional es con los métodos .createElement y .appendChild .
Editar:
La inserción de enlaces depende de dónde desee que vayan los enlaces (por supuesto), pero el fragmento ahora incluye una demostración cruda de la creación dinámica de elementos de anclaje relacionados con cada elemento de la lista.
const toppings = ['tomatoes', 'olives', 'cheese']; const myUl = document.getElementById("my-ul"); for(let topping of toppings){ const newLi = document.createElement("li"); const newAnchor = document.createElement("a"); newAnchor.href = "#" + topping; newAnchor.textContent = topping; newLi.appendChild(newAnchor); myUl.appendChild(newLi); } <h1>Toppings</h1> <ul id="my-ul"></ul> <div>-</div><div>-</div><div>-</div> <div id="tomatoes">tomatoes target</div> <div>-</div><div>-</div><div>-</div> <div id="olives">olives target</div> <div>-</div><div>-</div><div>-</div> <div id="cheese">cheese target</div> <div>-</div><div>-</div><div>-</div> <div>-</div><div>-</div><div>-</div> <div>-</div><div>-</div><div>-</div> <div>-</div><div>-</div><div>-</div> <div>-</div><div>-</div><div>-</div>