javascript(DOM)でIDとテキストノードを取得する方法

質問

下記のことをDOMを使ってやりたいと思っているのですが、ちょっとできないので教えていただきたいです。

［HTML内での記述］
<h2 id="apple">りんご</h2>
<p>...</p>
<h2 id="grape">ぶどう</h2>
<p>...</p>
<h2 id="orange">みかん</h2>
<p>...</p>
<h2 id="peach">もも</h2>
<p>...</p>

上記HTMLから<h2>内のid名とテキストを取得して、下記のようなリストにしたいです。
（<p>...</p>の部分はどうでもよいです。）

<ul>
<li><a href="#apple">りんご</a></li>
<li><a href="#grape">ぶどう</a></li>
<li><a href="#orange">みかん</a></li>
<li><a href="#peach">もも</a></li>
</ul>

要するに、見出しを取得してページ内リンクを作りたいのです。
DOMで、getElementByIdとか使って、、と何となくは分かるのですが、完成させるまでには至っていません。

ご教授いただければと思います。

回答No.1

yambejp · ベストアンサー

だいぶはしょりますが、流れ的にはこんなかんじ？

<script>
function createmenu(){
var menu=document.getElementById("menu");
while(n=menu.firstChild){
menu.removeChild(n);
}
var h2s=document.getElementsByTagName("h2");
var ul=document.createElement("ul");
for(var i=0;i<h2s.length;i++){
var tag_id=h2s[i].getAttribute("id");
var tag_txt=h2s[i].firstChild.nodeValue;
var li=document.createElement("li");
var a=document.createElement("a");
a.setAttribute("href","#"+tag_id);
a.appendChild(document.createTextNode(tag_txt));
li.appendChild(a);
ul.appendChild(li);
}
menu.appendChild(ul);
}
</script>
<input type="button" value="create menu" onclick="createmenu()">
<div id="menu"></div>
<h2 id="apple">りんご</h2>
<p>...</p>
<h2 id="grape">ぶどう</h2>
<p>...</p>
<h2 id="orange">みかん</h2>
<p>...</p>
<h2 id="peach">もも</h2>
<p>...</p>

お礼

できました。
ありがとうございました。