Несколько раз добавить дочерний элемент к его родительскому элементу.

Question

Я хочу динамически добавлять дочерний элемент к его родителю несколько раз, когда я нажимаю кнопку.

let btn = document.querySelector('.btn');
let starContainer = document.querySelector('.star__container');
let starWin = document.createElement('div');
starWin.classList.add('star__win');
starWin.innerText = 'Test';
btn.addEventListener('click',addItem);
function addItem(){
    starContainer.appendChild(starWin);
}

<div class="star__container"></div>
<button class='btn'>Click</button>

Answer 1

Вам необходимо создавать элемент starWin каждый раз, когда вызывается метод addItem. Теперь вы добавляете один и тот же элемент несколько раз. Он не будет клонирован.

let btn = document.querySelector('.btn');
let starContainer = document.querySelector('.star__container');
btn.addEventListener('click', addItem);

function addItem() {
  starContainer.appendChild(createElement());
}

function createElement() {
  let starWin = document.createElement('div');
  starWin.classList.add('star__win');
  starWin.innerText = 'Test';
  return starWin;
}

<div class="star__container"></div>
<button class='btn'>Click</button>

Answer 2

Обновление

Выпуск

Ожидание: A <div> следует добавлять в DOM для каждого нажатия кнопки.

Результат: При первом нажатии кнопки добавляется <div> к DOM, но после этого дальнейшее нажатие указанной кнопки ничего не вызывает.

Диагноз: Весь код, относящийся к созданию <div> не входит в функцию, он запускается только при загрузке страницы. Когда функция обработчика запускается нажатием кнопки, он обнаруживает, что <div> был сделан при загрузке страницы, и успешно добавляет <div> в DOM. Когда пользователь снова нажимает кнопку, ничего не происходит, потому что <div> был выполнен только один раз.

Решение: Поместите весь вышеупомянутый код в обработчик function addItem()

---

Демо 1

let btn = document.querySelector('.starBtn');

btn.addEventListener('click', addItem);

function addItem(event) {
  const box = document.querySelector('.starBox');
  let star = document.createElement('b');
  star.classList.add('stellar');
  star.innerText = '⭐';
  box.appendChild(star);
}

body {
  font-size: 3rem
}

.starBox {  
  word-wrap: break-word;
}

.starBtn {
  position: fixed;
  top: 0;
  left: 0;
  font: inherit;
}

<article class="starBox"></article>
<button class='starBtn'>?</button>

---

Не уверен, в чем проблема, на самом деле все равно. Если вы посмотрите на эту демонстрацию, она поможет вам решить любую проблему. Подробности комментируются построчно в демке. Заранее извиняюсь - мне скучно ...

?

Я вернусь и выложу достойный ответ позже. Просмотрите демонстрацию в режиме полной страницы.

Демо 2

// Reference the <form>
const STARS = document.forms.starFactory;

// Define the counter
let s = 0;

// Register the form to the click event
STARS.onclick = makeStar;

// Handler function passes event object
function makeStar(event) {

  // Define an array of characters✱ 
  let galaxy = ['★', '☆', '✨', '✩', '✪', '⚝', '✫', '✭', '✯', '✰', '✴', '⭐', '?', '?', '?', '?', '?']; 
  
  /*
  - "this" is the form
  - Collect all <input>, <button>, <output>, etc into a 
    NodeList
  */
  const field = this.elements;
  
  /*
  - event.target is always the tag the user interacted with
  - In this case it's the <button> because this handler 
    will not accept but that <button>
  */
  const clicked = event.target;
  
  /*
  - The NodeList `field` can reference form tags by 
    suffixing the tag's #id or [name]
  - The <fieldset> and <output> are referenced
  */
  const jar = field.starJar;
  const cnt = field.count;
  
  /*
  - By using a simple `if` condition strategically we can
    control what and how tags behave when a registered 
    event.
  - The remainder of the handler is explained at the very  
    end.  
  */  
  if (clicked.id === 'STARt') {
    s++;
    const star = document.createElement('S');
    let index = Math.floor(Math.random() * galaxy.length);
    let ico = galaxy[index];
    star.textContent = ico;
    star.className = 'star';
    star.style.zIndex = s;
    star.style.left = Math.floor(Math.random() * 85) + 1 +'%';
    star.style.bottom = Math.floor(Math.random() * 90) + 1 + '%';
    jar.appendChild(star);
    cnt.value = s;
  }
}

/*
- increment `s` by one
- create a <s>trikethrough tag (aka <s>tar tag JK)
- generate a random number in the range of 0 to 15
- get a character from galaxy Array at the index number 
  determined from the previous step.
- render the text character in the <s>tar
- assign the class .star to <s>tar
- assign `z-index` to <s>tar (Note: it increases every
  click which insures that tags won't collide)
- randomly assign `left` in the range of 1 to 85 to <s>tar
- randomly assign `bottom` in the range of 1 to 90 to
  <s>tar 
- append <s>tar to #starJar
- increment #count value
*/

:root,
body {
  font: 400 5vw/1 Verdana;
  background: #123;
}

#starFactory {
  display: flex;
  justify-content: center;
  align-items: center;
}

#starJar {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: end;
  width: 50vw;
  height: 50vw;
  border: 5px inset rgba(255,255,0,0.3);
  border-bottom-left-radius: 12vw;
  border-bottom-right-radius: 12vw;
  color: gold;
}

legend {
  position: relative;
  z-index: 5150;
  width: max-content;
  font-size: 1.5rem;
  color: goldenrod;
}

#STARt {
  position: relative;
  z-index: 5150;
  font-size: 1.5rem;
  background: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}

#count {
  position: relative;
  z-index: 9999;
  font-size: 1.25rem;
  width: 5vw;
  overflow-x: visible;
  color: cyan;
}

s.star {
  position: absolute;
  text-decoration: none;
  font-size: 1.5rem;
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
}

<form id='starFactory'>
  <fieldset id="starJar">
    <legend>starJar
      <button id='STARt' type='button'>
        ✴️ <output id='count'></output>      
      </button>
    </legend>
  </fieldset>
</form>

Answer 3

<div class="star__container"></div>
 <button class='btn'>Click</button>


let btn = document.querySelector('.btn');
let starContainer = document.querySelector('.star__container');

btn.addEventListener('click',addItem);
function addItem(){
  let starWin = document.createElement('div');
  starWin.className = 'star__win';
  starContainer.appendChild(starWin);
}