Create list with hyperlink (document fragments) as text string

user_17140737 0
Viewed 29

I am totally new at javascript and am trying to create a dynamic list in JavaScript that is both a hyperlink to and shows the text string of a tag in my html code that has the id = v1. Kind of like a menu to different parts of that same webpage.

I have tried to do this using document fragments (https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#document_fragments) but it is not working and I don't have any idea of how to insert the text string of the in the "menu".

Here is part of my code:

var container = document.getElementById("contentarea");
var header = document.getElementById("v1");
for (i = 0; i < length.header; i++) {
        $(document.createElement("li")).li;
        $(document.createElement("a")).link.append(li)( {
            href: "#v1" 
        })

        list.appendChild(li);
        container.appendChild(list)
    }
list jquery javascript
1 Answers

You could do something like this

// div to get the textContent from, replace it with whatever you want
const divE = document.getElementById('test');
// our list tag
const list = document.getElementById('list');

// looping
for (let i = 0; i < 4; i++) {
    const listEl = document.createElement('li'); // our list element
    const aTag = document.createElement('a'); // a new <a> tag to append link 
    const linkTag = document.createElement('link'); //new link tag
    linkTag.href = '#test'; // setting hyperlink
    aTag.textContent = divE.textContent // setting the textContent for <a> tag
    aTag.appendChild(linkTag); // appending link to the a tag
    listEl.appendChild(aTag); // appending a tag to the <li> tag
    list.appendChild(listEl) // finally appending our list element to the main list
}
<div id="test">Something here</div>
<ul id="list"></ul>

user_159258140
Related