Making an organized list /w javascript

Question

I'm new to JavaScript, and for school I have to automatically make every <\h1> on my page generate into an "ol" with in every "li" a link to the place on my page where that header is placed so in the end I have a table of contents with links on every "li". So I should be able to just write text and not worry about the table of contents. Is there a way to do this without using too complixated code? And preferably not very long so I can understand it.

e.g.

<h1 id="h1-01">Title 1<\h1>
<h1 id="h1-02">Titel 2<\h1>
<h1 id="h1-03">Titel 3<\h1>
<h1 id="h1-04">Titel 4<\h1>

Make this generate like:

<ol>
<li><a href="h1-01">Title 1</a></li>
<li><a href="h1-02">Title 2</a></li>
<li><a href="h1-03">Title 3</a></li>
<li><a href="h1-04">Title 4</a></li>
</ol>

I don't want anyone to make all of my homework, this is just a tiny tiny part of the homework even. What I want to know is how do I make an organized list with list items in javascript without too complicated code. I already found a way to put every header text in a variable. This is what I have

function generate(){
var titels = new Array();
for(var i = 1;i<10;i++){
var test = 'h1-0'+ i;
    titels[i] = document.getElementById(test).textContent;  
}
}
-->
</script>

The only problem is now that I have to make a list with these variables, but I haven't found anything usefull on the internet, everything that I've found uses Jquery ir is specific for someone's problem. I would also like a way to count the amount of headers I'm using but tthat's another question. Is it actually even possible to have code that gets literally implemented like I'm writing it?

like:

html.write("<ol>");

for(var i = 1, i<10,i++){

html.write("<il>" + titels[i] +  "<\il>");

}

html.write("<\ol>")

Here's a decent DOM manipulation introduction: http://quirksmode.org/dom/intro.html - which is how you add things to an existing document. jQuery and others are wrappers around that "standard" functionality. — millimoose, Nov 30 '13 at 21:02
Isn't this almost the same question [How auto-generate a table of contents](http://stackoverflow.com/questions/20304440/how-auto-generate-a-table-of-contents) from the same user? — Anto Jurković, Nov 30 '13 at 21:08
spend some more time learning on your own...instead of asking a new question every hour with new updates — charlietfl, Nov 30 '13 at 21:16

score 0 · Answer 1 · answered Nov 30 '13 at 21:02

0

First of all, you need valid HTML, so change

<h1 id="h1-01">Title 1<\h1>

to

<h1 id="h1-01">Title 1</h1>

then add some javascript:

var h1 = document.getElementsByTagName('h1'),
    ol = document.createElement('ol');

for (var i=0; i<h1.length; i++) {
    var id  = h1[i].id,
        txt = h1[i].innerHTML,
        li  = document.createElement('li'),
        a   = document.createElement('a');

    a.href = id;
    a.innerHTML = txt;

    li.appendChild(a);
    ol.appendChild(li);
}

document.body.innerHTML = '';  // empty first
document.body.appendChild(ol); // then append to whatever element, I used body

FIDDLE

answered Nov 30 '13 at 21:02

adeneo

312,895
29
395
388

1

Adeneo, are you really going to do the guys homework for him? Is that what you want the guy to learn, that he should just look on the internet for an answer? Had you said, "hint, we want you to look up the document object model, with particular emphasis on 'createElement' that would be a different story. – zipzit Nov 30 '13 at 21:05
@zipzit - I look on the internet for answers all the time, but luckily I'm probably a lot better at searching than the OP, as I always tend to find answers for whatever it is I'm looking for without having to ask here. – adeneo Nov 30 '13 at 21:16
Don't worry I'll still be sitting here a while to comment every piece of code, try it out myself without using this code, and code all the rest. This is just a small part of my homework and now I actually know things like getElementsByTagName exist and such. Our teacher is so bad, we only saw how to use checkboxes and then we get this assignment, he's kinda crazy to give this as a first assignment. We literally saw less than 2 hours of Javascript. – user3052776 Dec 01 '13 at 10:28

score 0 · Answer 2 · answered Nov 30 '13 at 21:21

as you have said this is your homework , so i will just give you a little script as help , and you will have to google for the rest .

P.S : jquery is your best option tho.

<script>
str=new String();
x=document.getElementsByTagName("h1").length // will count all tags starting with H1
for (i=1;i<=x;i++)
{
str+="<li><a href='h"+i+"-0"+i+">Title "+i+"</a></li>"//append new child to list
}
alert(str);
</script>

p.s : i didnt handle the 01 vs 1 so this code is valid till 9 , and afterwards it shall output 010 , this is something you should handle as well ;)

Making an organized list /w javascript

2 Answers2