Estoy tratando de entender el error DOMException: Node.insertBefore: Child to insert before is not a child of this node que he visto en los proyectos React y Angular a lo largo del tiempo y comencé a preguntarme: ¿por qué importa si un el elemento A es "un hijo del" elemento B? ¿Por qué elegir Node.insertBefore() sobre Element.insertAdjacentElement() ?
A mi modo de ver, ambos tienen soporte de navegador desde hace mucho tiempo y ambos funcionan para SVG. Pero Node.insertBefore() parece tener una API incómoda para mí, porque requiere especificar el padre.
¿Me estoy perdiendo de algo?
insertBefore() requiere que proporcione el nodo principal, un nodo secundario existente y el nuevo nodo que se insertará; el nuevo nodo se coloca antes del nodo secundario. El nodo secundario debe ser un elemento secundario inmediato del nodo principal; de lo contrario, obtendrá ese error.
insertAdjacentElement solo requiere que proporcione un nodo existente y el nuevo nodo. El nuevo nodo se inserta en algún lugar relacionado con el nodo existente. No es necesario proporcionar el nodo principal.
insertAdjacentElement() es más nuevo que insertBefore() , pero ambos existen desde hace algún tiempo.