首頁(yè) 猿問(wèn) 如何使用 JavaScript...

如何使用 JavaScript 生成多個(gè) a 標(biāo)簽？

JavaScript

aluckdog 2023-04-20 10:48:36

我想創(chuàng)建多個(gè)a標(biāo)簽來(lái)填充一個(gè)div. 用 HTML 編寫此代碼會(huì)占用很多行，而使用 JavaScript 腳本會(huì)使事情變得更容易。不幸的是，我仍在學(xué)習(xí)它，并且正在尋求幫助。下面是我想要使用 JavaScript 生成的 HTML 代碼，在里面div id="countries"<div class="countries"> <div id="Denmark"> <h4>Denmark</h4> <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}

查看完整描述

2 回答

森林海

TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊

您需要?jiǎng)?chuàng)建元素并在循環(huán)中a設(shè)置其和文本。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);

});

反對(duì) 回復(fù) 2023-04-20

智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

A。是的，創(chuàng)建一個(gè)循環(huán)。你也可以使用順便countries.forEach(()=> ...)說(shuō)一句。 b. 不要忘記在循環(huán)繼續(xù)之前附加元素。 C。一個(gè)小建議——如果代碼越來(lái)越大，將代碼分成具有有意義名稱的小函數(shù)。

祝你好運(yùn)！

反對(duì) 回復(fù) 2023-04-20