Понимание appendChild В JS относительно использования `this`

Question

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

Контекст / Цель

Целью или контекстом этого фрагмента является создание и отслеживание счетчика символов, который динамически настраивается в браузере пользователя. Твист есть; Мне нужно было, чтобы применить к каждому <textarea></textarea> это может быть на странице.

Чтобы привлечь внимание пользователей к счетчику символов, я хотел создать диапазон, который будет обтекать только счетчик, то есть 255. и динамически корректировать цвет шрифта, когда встречаются определенные параметры.

Что у меня сейчас

<div></div>

Что я после

<div>
   <span id="cid0"></span>
</div> 

Мой JS - (Смотрите полный сценарий здесь - JSFiddle)

  // create wrapper & span element
  this.wrapper = document.createElement("div");
  this.span = document.createElement("span");
  this.span.id = "cid" +i;
  this.span.appendChild(this.wrapper);

  this.wrapper.innerHTML = 'Chars left: ';
  this.span.innerHTML = (this.MAX - input.value.length);

Если бы кто-нибудь мог уточнить, как добиться того, чего я добиваюсь, где я иду не так, и если я допустил ошибку, я был бы признателен за помощь.

Answer 1

Я думаю, что это то, что вы хотели достичь

<div>
   Chars left: <span id="cid0">xxxxx</span>
</div> 

Правильно? Тогда попробуй это

  // create wrapper & span element
  this.wrapper = document.createElement("div");
  this.wrapper.innerHTML = 'Chars left: ';
  this.span = document.createElement("span");
  this.span.id = "cid" +i;
  this.span.innerHTML = (this.MAX - input.value.length);

  this.wrapper.appendChild(this.span);

Это должно делать свое дело