如何使用 JavaScript 生成多个 a 标签？

Question

我想创建多个a标签来填充一个div. 用 HTML 编写此代码会占用很多行，而使用 JavaScript 脚本会使事情变得更容易。不幸的是，我仍在学习它，并且正在寻求帮助。下面是我想要使用 JavaScript 生成的 HTML 代码，在里面div id="countries"<div class="countries">  <div id="Denmark">    <h4>Denmark</h4><!-- number of links is variable to each country -->    <a href="https://www.example.com">Link1</a>    <a href="https://www.example2.com">Link2</a>  </div></div>一些JS代码let countrySelect = document.getElementsByClassName('countries');let links = ["https://www.example1.com", "https://www.example2.com", "https://www.example3.com", "https://www.example4.com", "https://www.example5.com", "https://www.example6.com", "https://www.example7.com", "https://www.example7.com"];// make an array of countrieslet countries = ["Denmark", "Spain", "Italy", "Slovenia", "Malta", "Hungary", "Austria", "Czech Republic"];// make a divlet makeDiv = document.createElement("div");// add an ID to div just createdmakeDiv.setAttribute('id', 'country');// make an A taglet tag = document.createElement("a");tag.setAttribute('href', links[1]); // multiple links needed...integrate in a loop?// make a loop to create multiple country divsfor (let index = 0; index < countries.length; index++) {  // insert all the elements in the loop}

Answer 1

您需要创建元素并在循环中a设置其和文本。href

countries.forEach(country => {

    let makeDiv = document.createElement("div");

    makeDiv.id = country;

    let h4 = document.createElement("h4");

    h4.innerText = country;

    makeDiv.appendChild(h4);

    links.forEach((link, i) => {

        let tag = document.createElement('a');

        tag.href = link;

        tag.innerText = `Link${i+1}`;

        makeDiv.appendChild(tag);

    });

    countrySelect[0].appendChild(makeDiv);

});

Answer 2

A。是的，创建一个循环。你也可以使用顺便countries.forEach(()=> ...)说一句。 b. 不要忘记在循环继续之前附加元素。 C。一个小建议——如果代码越来越大，将代码分成具有有意义名称的小函数。

祝你好运！