Search code examples
javascriptdomappendchild

How can I appendChild to a text field?

I am trying to create a text field which takes user input and creates a tag if its a valid email id.

I am using appendChild() method to append the tags after creating them but I am unable to do so.

Below is the code to append the <span> to the field:

HTML

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

JS

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

I am not sure that this is the right way to do this, but it would be great if someone can help.

Solution

  • As suggested by @sonlexqt in the comments we cannot append to <input> tag we have to create a <div> with contenteditable=true and can append any <div> to the <input> field.