Как сгенерировать несколько тегов a с помощью JavaScript?

#javascript #loops

#javascript #циклы

Вопрос:

Я хотел бы создать несколько a тегов для заполнения a div . Написание этого в HTML заняло бы много строк, а сценарий JavaScript упростил бы задачу. К сожалению, я все еще изучаю это и ищу некоторую помощь.

Ниже приведен мой HTML-код, который я хочу сгенерировать с помощью JavaScript, внутри 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 countries
let countries = ["Denmark", "Spain", "Italy", "Slovenia", "Malta", "Hungary", "Austria", "Czech Republic"];

// make a div
let makeDiv = document.createElement("div");
// add an ID to div just created
makeDiv.setAttribute('id', 'country');
// make an A tag
let tag = document.createElement("a");
tag.setAttribute('href', links[1]); // multiple links needed...integrate in a loop?

// make a loop to create multiple country divs
for (let index = 0; index < countries.length; index  ) {
  // insert all the elements in the loop
}

1. В чем конкретная проблема? Создайте тег в цикле, добавьте его в соответствующий div. Если вы создаете несколько элементов с идентификатором, пожалуйста, убедитесь, что каждый идентификатор уникален. Не связано, но было бы чище сохранить названия стран и ссылки в одном массиве объектов.

2. Можете ли вы использовать язык сценариев на стороне сервера? (Вам нужно проверить, какие опции доступны на вашем сервере.) JavaScript на стороне клиента кажется излишним для ваших целей…

Ответ №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);
});

1. Я добавил цикл для стран. В вопросе вы сказали, что количество ссылок зависит от страны, но вы не показали, как получить ссылки для каждой страны, поэтому в моем ответе используется один и тот же links массив для всех стран. Просто добавьте способ получения значения для конкретной страны links в вашем коде.

2. Большое вам спасибо! Я вставил этот код в свою скрипку и выдает следующую ошибку: countrySelect.appendChild is not a function почему?

3. getElementsByClassName возвращает список узлов, а не один узел. Необходимо проиндексировать его.

Ответ №2:

a. да, создайте цикл. вы также можете использовать countries.forEach(()=> ...) btw. b. не забудьте добавить элемент перед продолжением цикла. c. небольшое предложение — если код становится больше, разделите свой код на небольшие функции со значимым именем.

удачи!