将同一个班级的单词拉到一起的有序列表

时间:2017-01-09 06:34:09

标签: javascript html

在我的一个网页上,我有一个阅读文本,其中的词汇单词以绿色(<span class="highlighted">)突出显示。我正在尝试编写一个脚本来获取所有这些词汇单词并将它们放入文本下的有序列表中。我写的代码几乎完全符合我的要求,但它只显示每个列表项的第一个字母。这就是我到目前为止所拥有的:

<ol id="vocabulary">
</ol>

<script>
//Get number of vocabulary terms
var list = document.getElementsByClassName('highlighted').length;
var listed = "";

//Pull each word out
for (var i =0; i < list; i++) {
    var vocab = document.getElementsByClassName('highlighted')[i].innerHTML
    //Create a new list item for each word
    listed += "<li>" + vocab[i]+ "</li>";
}

document.getElementById("vocabulary").innerHTML = listed;

</script>

关于如何做到这一点的任何想法?谢谢!

1 个答案:

答案 0 :(得分:5)

因为您正在访问innerHTML的i元素vocab[i]。试着这样做。

&#13;
&#13;
<ol id="vocabulary">
</ol>

<p class="highlighted">AAA</p>
<p class="highlighted">BBB</p>
<p class="highlighted">CCC</p>

<script>

var list = document.getElementsByClassName('highlighted');
var listed = "";

for (var i =0; i < list.length; i++) {
    listed += "<li>" + list[i].innerHTML + "</li>";
}

document.getElementById("vocabulary").innerHTML = listed;

</script>
&#13;
&#13;
&#13;