Создание упорядоченного списка/w javascript

Question

Я новичок в JavaScript, и для школы я должен автоматически сделать каждый < \ h1> на моей странице сгенерировать в «ol» с каждой «ли» ссылкой на место на моей странице, где этот заголовок помещен так, что в конце концов, у меня есть оглавление со ссылками на каждом «ли». Поэтому я должен иметь возможность просто писать текст и не беспокоиться о содержании. Есть ли способ сделать это без использования слишком сложного кода? И желательно не очень долго, чтобы я мог это понять.

например.

<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> 

Сделать это генерировать как:

<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> 

Я не хочу, чтобы кто-нибудь сделать все мое домашнее задание, это лишь малая малая часть домашней работы даже. Я хочу знать, как создать упорядоченный список со списком в javascript без слишком сложного кода. Я уже нашел способ поместить каждый текст заголовка в переменную. Это то, что у меня есть

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> 

Единственная проблема теперь, что я должен сделать список с этими переменными, но я ничего полезного в Интернете, все, что я нашел не нашел использует Jquery ИК специфический для чьей-то проблемы. Мне также хотелось бы подсчитать количество заголовков, которые я использую, но это еще один вопрос. Действительно ли возможно даже иметь код, который буквально реализуется, как я его пишу?

как:

html.write("<ol>"); 

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

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

} 

html.write("<\ol>") 

Answer 1

Прежде всего, вам нужно правильный HTML, поэтому изменить

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

в

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

затем добавить 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

Answer 2

, как вы сказали, это ваша домашняя работа, поэтому я просто дам вам небольшой скрипт в качестве помощи, и вам придется искать в остальном.

P.S: jquery - ваш лучший вариант 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> 

пс: я не обрабатывать 01 против 1, так что этот код действителен до 9, а затем он будет выход 010, это то, что вы должны обращаться так же;)