Question

我是JavaScript的新手，对于学校我必须自动制作每个＆lt; \ h1＆gt;在我的页面上生成一个“ol”，在每个“li”中链接到我页面上放置标题的地方，所以最后我有一个目录，每个“li”上都有链接。所以我应该能够只写文本而不用担心目录。有没有办法在不使用过于复杂的代码的情况下执行此操作？最好不要太长，所以我能理解它。

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>

使其生成如下：

<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 ir特定于某人的问题。我还想要一种方法来计算我正在使用的标题数量，但这是另一个问题。实际上甚至可以让代码实际上像我正在编写它一样实现吗？

像：

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是你最好的选择。

<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：我没有处理01 vs 1所以这段代码有效到9，之后它会输出010，这也是你应该处理的事情;）

使用javascript制作有组织的列表

2 个答案: