Как вставить элемент несколько раз во все элементы с заданным классом?

Question

[historydev]

Добрый день.Скажите пожалуйста как мне это реализовать, вот моя попытка:

let counts = []

					for(i=1; i<75; i++) {

						counts.push(`<div class='count'>${i}</div>`)

						document.querySelectorAll('.g-counter .counts').forEach(ans => {

							ans.appendChild(counts[i])

						})

					}

Thanks

Comments

[Пашенька]

appendChild вставляет ноды, а у тебя строки. Строки можно воткнуть innerHTML'ом или insertAdjacentHTML, если в элементе что-то имеется.
И ещё при объявлении i, он у тебя стал свойством window, что не гуд.

[historydev]

like-a-boss, да я пробовал inner сложив в массив и в строку его превратив, но запятые оставались, я где-то уже спрашивал как от них избавиться вроде, не помню :/

Answer 1

[0xD34F]

const html = [...Array(3)].map((n, i) => `<div class="count">${++i}</div>`).join('');
document.querySelectorAll('.counts').forEach(n => n.insertAdjacentHTML('beforeend', html));

или

const counts = document.querySelectorAll('.counts');

for (let i = 0; i < counts.length; i++) {
  for (let j = 0; j < 3; j++) {
    const el = document.createElement('div');
    el.className = 'count';
    el.innerText = j + 1;
    counts[i].appendChild(el);
  }
}

или

const div = document.createElement('div');
div.classList.add('count');

const fragment = document.createDocumentFragment();
fragment.append(...Array.from({ length: 3 }, (n, i) => (
  n = div.cloneNode(),
  n.textContent = -~i,
  n
)));

for (const n of document.querySelectorAll('.counts')) {
  n.append(fragment.cloneNode(true));
}

Comments

[historydev]

Где почитать? В частности: ... / beforeend

[0xD34F]

Владимир, чё, в гугле забанили?

[historydev]

0xD34F, да, а как мне прибавлять не 1, а 5? попробовал заменить i + 5 ничего не поменялось

[0xD34F]

Владимир, чё, умножение в школе не проходили?

[historydev]

0xD34F, хватит чсвшить друг, напрягает, пожалуйста, я с тобой нормально разговариваю или как чмошник?

[0xD34F]

Владимир, разумеется, как чмошник. И не только со мной, а со всеми - кем ещё надо быть, чтобы подобным ублюдочным образом оформлять вопросы?

[historydev]

0xD34F, слышь умник, поясни за вопрос, аргументы жду, языкастый

[0xD34F]

Владимир,

поясни за

[ хохочет ]

Вам лет-то сколько?

Что не так - разговоры не по делу; выблёвывание (что, так сложно было отформатировать нормально?) куска кода, по которому потенциальным отвечающим предлагается угадать, чего хочет автор вопроса.

[historydev]

0xD34F, да дело в том,что я не умею объяснять, ничего, от банальных вещей в жизни, до того с чем помочь. Можно было просто кинуть коммент с текстом выше без негатива и я бы поправил.

[0xD34F]

Владимир,

дело в том,что я не умею

Это никому не интересно.

я бы поправил

Причин верить подобному утверждению у меня нет.

Answer 2

[Надим]

Вставить нужно на странице? И если да, то вставить как, в начало найденных элементов или конец?

Comments

[historydev]

Да у меня пустой блок, я не хочу вручную писать нужное кол-во, решил циклом бахнуть.Покажите оба варианта если не трудно, благодарю.

[Надим]

Владимир,

all_ell = document.querySelectorAll('div.test'); // Ищем все дивы с классом test

// Обходим найденные дивые по одному:
for (i = 0; i < all_ell.length; i++) {
	
	all_ell[i].innerHTML = all_ell[i].innerHTML + 'текст или код для вставки'; // для вставки в конец
	
	all_ell[i].innerHTML = 'текст или код для вставки' + all_ell[i].innerHTML; // для вставки в начало
	
}