É impossível com pai.appendChild(filho) pois é preciso que pai esteja no documento antes de adicionar um filho
Essa afirmação não é verdadeira.
Pode começar por consultar a documentação, e confirmar que não existe nenhuma menção à afirmação que fez.
No entanto, podemos por o appendChild
em código e ver que funciona, adicionando o nó, mesmo quando ambos não estão no DOM:
var pai = document.createElement('div');
var filho = document.createElement('div');
console.log(`Pai tem ${pai.childNodes.length} filhos`); //Pai tem 0 filhos
pai.appendChild(filho);
console.log(`Pai tem ${pai.childNodes.length} filhos`); //Pai tem 1 filhos
for (let i = 0; i < pai.childNodes.length; ++i){
console.log(`Filho ${i} é ${pai.childNodes[i].tagName}`);
}
Concluindo:
É de facto com a função appendChild
que adiciona filhos a nós que não estejam ainda no DOM.
innerHTML
em vez decreateElement
?