JavaScript AppendChild on an Array creating element

Question

I'm trying to update a page when a form is submitted with a success message and it will replace a form that is currently there. So right now I have:

function pageUpdate(){
 document.querySelectorAll('.form-inside').forEach(e => e.remove());
 var tag = document.createElement("p");
 var text = document.createTextNode("Thanks");
 tag.appendChild(text);
 var form_contain = document.getElementsByClassName('form-container');
 form_contain.appendChild(text);
}

This failsat this point with two different sections. I thought I could do something similar with the remove and do:

document.querySelectorAll('.form-container').forEach(e => e.appendChild(tag));

This works...but not really. It's actually only applying to the last one not both. Is there a clear way to appendChild to multiple with the same class?

Answer 1

An element can't appear in multiple parts of the document at the same time.

If you append it to element A, then append it to element B, it has to be removed from A so it can be placed in B.

You need to create the element and populate it each time you loop.