Problem with Javascript ParentNode - Div containers

There is a problem with parentnodes divs, and I really don't know what I'm doing wrong

I have tried different things but I can't get it to display correctly, and the console always gives me the same error:

Uncaught DOMException: Node.insertBefore: Child to insert before is not a child of this node
processNode ...
EventListener.handleEvent* 

I would appreciate the help of someone more experienced than me to try to solve this problem.

The result should be: (a div class inside another div)

<div class="embed">
    <div class="embed-player">theplayer embed HERE</div>
</div>

But what I get is: (a div below another div)

The script:

    <script>
...
                    var embedDiv = document.createElement('div');
                    embedDiv.className = 'embed';
                    var embedId = 'embed-player';
                    embedDiv.id = embedId;
                    parent.insertBefore(before, node);
                    parent.insertBefore(embedDiv, node);
                    var after = document.createTextNode(text.slice(regex.lastIndex));
                    parent.insertBefore(after, node);
                    parent.removeChild(node);
                    var script = document.createElement('script');
                    script.innerHTML = `theplayer.embed('` + embedId + `', '` + match[1] + `',{locale: "auto", autoplay: true});`;
                    parent.insertBefore(script, after);
                }
            } else if (node.nodeType === 1) {
                for (var i = 0; i < node.childNodes.length; i++) {
                    processNode(node.childNodes[i]);
                }
            }
        }
        processNode(document.body);
    });
...
    </script>

Few mistakes in your code:

• expectation:

<div class="ipcl-embed">
   <div class="ipcl-embed-player">
   </div>
</div>

but code:

                    var embedDiv = document.createElement('div');
                    embedDiv.className = 'ipcl-embed';
                    var embedId = 'ipcl-embed-player';//assigning this id to same div which has class ipcl-embed? instead of child?
                    embedDiv.id = embedId;

• you should create another div within .ipcl-embed i.e..ipcl-embed-player append it then handle script
• handle node insertion in proper order

Edited script:

<script>
                    var embedDiv = document.createElement('div');
                    embedDiv.className = 'ipcl-embed';
                    
                    var playerDiv = document.createElement('div');
                    playerDiv.className = 'ipcl-embed-player';
                    embedDiv.appendChild(playerDiv);

                    
                    parent.insertBefore(embedDiv, node);// Insert the embedDiv before the text node (node)
                    parent.removeChild(node);// Remove the original text node


                    var script = document.createElement('script');
                    script.innerHTML = `theplayer.embed('` + playerDiv.className + `', '` + match[1] + `', {locale: "auto", autoplay: true});`;
                    parent.appendChild(script);
                }

            } else if (node.nodeType === 1) {
                for (var i = 0; i < node.childNodes.length; i++) {
                    processNode(node.childNodes[i]);
                }
            }
        }
        processNode(document.body);
    });
</script>