如何访问有序列表的锚标记并更改 JavaScript 中的“href”

How to access a ordered list's anchor tag and change the "href" in JavaScript

本文关键字：JavaScript 中的 href 访问 何访问 列表      更新时间：2023-09-26

如何更改有序列表中锚标记的 HREF？更具体地说，在列表附加到正文的特定情况下，如何更改锚标记的 HREF？

这是我到目前为止尝试过的：

var image = document.createElement("img");
image.src = "http://archiveteam.org/images/1/15/Apple-logo.jpg"
image.className = "image";
var aboutMe = document.createElement("p");
aboutMe.innerHTML = "Hello";
aboutMe.className = "Border";
var movies = ["Inception", "Remember the Titans", "Happy Gilmore", "Interstellar", "The Martian"]
var listOfMovies = document.createElement("ol");
for (var i = 0; i < 5; i++) {
  var anchor = document.createElement("a");
  anchor.href = "#";
  anchor.innerHTML = movies[i];
  var bullets = document.createElement("li");
  bullets.appendChild(anchor);
  listOfMovies.appendChild(bullets);
}
listOfMovies.getElementsByTagName("li")[0].href = 'http://www.imdb.com/title/tt1375666/';
listOfMovies.getElementsByTagName("li")[1].href = 'http://www.imdb.com/title/tt0210945/';
listOfMovies.getElementsByTagName("li")[2].href = 'http://www.imdb.com/title/tt0116483/';
listOfMovies.getElementsByTagName("li")[3].href = 'http://www.imdb.com/title/tt0816692/';
listOfMovies.getElementsByTagName("li")[4].href = 'http://www.imdb.com/title/tt3659388/';
document.body.appendChild(image);
document.body.appendChild(aboutMe);
document.body.appendChild(listOfMovies)
listOfMovies.className = "Border"

您正在设置 li 元素的 href 属性，而不是 a（锚点）元素。 因此，更改 href 的第一行代码应该是：

listOfMovies.getElementsByTagName("a")[0].href = 'http://www.imdb.com/title/tt1375666/';

您还可以循环访问此列表以获得更简单的代码，方法是按照与电影相同的顺序将 href 添加到数组中，甚至创建一个带有电影标题和 url 的电影对象，如下所示：

movies = [{ title: "Inception", url: "http://www.imdb.com/title/tt1375666/" },{...}...];
相关文章：