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

Question

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

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

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

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

То, что я в настоящее время

<div></div> 

То, что я после

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

My 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); 

Это должно сделать трюк