如何将JavaScript数组输出到HTML链接

How to output a JavaScript array to HTML links?

本文关键字:HTML 链接 输出 数组 JavaScript      更新时间:2023-09-26

我读过很多答案,告诉我如何将arrray转换为字符串,或者将每个项目放入无序列表,但我想知道是否有一种简单的方法可以将数组中的每个项目输出为自己的链接?对于学校项目,请不要使用jQuery,只使用JavaScript。

您可以动态添加到DOM中。

像这样的东西:

var arrayOfLinks = ['http://www.google.com', 'http://www.youtube.com'];
var placeToPutLinks = document.getElementById('the-id-of-a-dom-element');
for (var i = 0; i < arrayOfLinks.length; i++) {
  var anchorTag = document.createElement('a');
  var hrefValue = arrayOfLinks[i];
  anchorTag.href = hrefValue;
  placeToPutLinks.appendChild(anchorTag);
}

以下是一些参考资料:
http://www.w3schools.com/jsref/met_node_appendchild.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

我希望这能有所帮助,

Rhys

我会给你一个提示

  1. 创建阵列
  2. 循环遍历数组并编写一个无序列表或其他任何内容

数组示例:itemList=["加拿大"、"美国"、"墨西哥"、"伯利兹"、"危地马拉"、"洪都拉斯"、"萨尔瓦多"、"尼加拉瓜"、"哥斯达黎加"、"巴拿马"];

循环浏览列表:

for(var i=0; i<itemList.length; i++){
document.getElementById("myList").innerHTML+=
    '<li>' +
    itemList[i]  + 
    '</li>'
}

注意,上面的循环被放置在一个id为"myList"的div中

将循环放入函数中,然后用数组调用该函数是有意义的。

将函数命名为say:writeItems例如:函数writeItems()

调用函数并传递数组writeItems(itemList);

这应该是一个良好的开端。

好运