Использование цикла for

Question

На странице есть таблица элементов, необходимо в определенное место добавлять кнопку, вот код скрипта:

var input = document.getElementsByClassName('address')[0].innerText;
var button = document.getElementsByClassName('order')[0].getElementsByTagName('td')[4];
var a = document.createElement('a');
var linkText = document.createTextNode('Геолокация');
a.appendChild(linkText);
a.target = "_blank";
a.className = "grey";
a.href = "https://yandex.ru/maps/?text=Город, " + input;
button.appendChild(a);

Код рабочий, но добавляет кнопку только на на первый элемент ('order')[0], а их много, штук [100], td[4] постоянный, прописывать для каждого ('order') свой код как то не по феншую, есть ли возможность организовать сей процесс через цикл for? ('address')[0] и ('order')[0] идут по порядку, то есть когда ('address')[1] то и ('order')[1].

Answer 1

let addresses = document.getElementsByClassName('address');
let orders = document.getElementsByClassName('order');

Array.from(addresses).forEach((el, index) => {
    let address = addresses[index].innerText;
    let order =  orders[index].getElementsByTagName('td')[4];
    let a = document.createElement('a');
    let linkText = document.createTextNode('Геолокация');
    
    a.appendChild(linkText);
    a.target = "_blank";
    a.className = "grey";
    a.href = "https://yandex.ru/maps/?text=Город, " + address;
    order.appendChild(a);       
});

<div class="address">text 1</div>
<div class="order">order 1 
<table><tr><td></td><td></td><td></td><td></td><td>1</td></tr></table>
</div>

<div class="address">text 2</div>
<div class="order">order 2
<table><tr><td></td><td></td><td></td><td></td><td>2</td></tr></table>
</div>

<div class="address">text 3</div>
<div class="order">order 3
<table><tr><td></td><td></td><td></td><td></td><td>3</td></tr></table>
</div>

Но лучше опираться непосредственно на html, который у вас есть, и который вы не предоставили в впоросе

БЛОГ НА HUSL

Использование цикла for

Ответы (1 шт):