如何将 appendChild 附加到文本字段？

Question

我正在尝试创建一个文本字段，它接受用户输入并创建一个标签（如果它是有效的电子邮件 ID）。

我正在使用 appendChild() 方法在创建标签后附加标签，但我无法这样做。

下面是将 <span> 附加到字段的代码：

HTML

<textarea id="customField" class="mdl-textfield__input" type="text" rows="1"></textarea>

JS

document.getElementById("customField").appendChild(spanParent);

我不确定这样做是否正确，但如果有人能提供帮助，那就太好了。

Answer 1

您不能将 appendChild() 与输入字段一起使用，而是与该输入字段的容器一起使用，请在此处查看实时操作：https://jsfiddle.net/37b2fa2e/2/。

您还应该考虑使用 insertBefore() 方法，这有助于将指定节点作为当前节点的子节点插入到引用节点之前。

Answer 2

正如@sonlexqt 在评论中所建议的，我们不能附加到 <input> 标签，我们必须创建一个带有 contenteditable=true 的 <div> 并且可以将任何 <div> 附加到<input> 字段。