了解 JS 中 appendChild 与 `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);

这应该可以解决问题

了解 JS 中 appendChild 与 `this` 的使用

Understanding appendChild In JS in relation to the use of `this`

javascript

appendchild

child-nodes