javascript Navigation (list), how to add elements dynamically

user_15992402 0
Viewed 95

I add blocks on one subpage - it's an HTML code. There are more and more of these blocks and I would like to make it easier for myself to navigate. The blocks are displayed one after the other. At the very top of the subpage there is "navigation" - the div title and the href = id div attribute.

Here is the "navigation" code:

<ul>
    <li><a href="#tips1">Tips - Lorem</a></li>
    <li><a href="#tips2">Tips 2 - How to</a></li>
    <li><a href="#tips3">Tips 3 - Hello World</a></li>
</ul>

And these are the blocks that I add (each has a different id and a different title in the h3 tag):

<div id="tips1">
    <h3>Tips - Lorem</h3>
    <p>Lorem ipsum. Lorem ipsum.</p>
</div>

I just add blocks as HTML code. How to make this navigation dynamic? Foreach loop?

Regards Jacob.

wordpress html javascript
2 Answers

You can maintain an array and use map() to iterate over and display. Or a foreach(). If you intend to use JavaScript

user_154159960

This is my code for creating dynamic td inside table tag using foreach loop please read this properly and I am sure it will help you

let myTr = document.getElementById("myTr");
let data = ['B','C'];

data.forEach(item => {
  let td = document.createElement("TD");
  td.innerHTML = item;
  myTr.appendChild(td);
});
user_159792870
Related