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

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 containers = document.querySelectorAll('.counts');
const tag = 'div';
const className = 'count';
const count = 3;

Добавляем:

const html = [...Array(count)]
  .map((_, i) => `<${tag} class="${className}">${i + 1}</${tag}>`)
  .join('');

for (const n of containers) {
  n.insertAdjacentHTML('beforeend', html);
}

или

for (let i = 0; i < containers.length; i++) {
  for (let j = 0; j < count;) {
    const el = document.createElement(tag);
    el.classList.add(className);
    el.innerText = ++j;
    containers[i].appendChild(el);
  }
}

или

const fragment = document.createDocumentFragment();
fragment.append(...Array.from({ length: count }, (_, i) => (
  Object.assign(document.createElement(tag), {
    textContent: -~i,
    className,
  })
)));

containers.forEach(n => 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; // для вставки в начало
	
}