Javascript ParentNode 问题 - Div 容器

Question

parentnodes div有问题，我真的不知道我做错了什么

我尝试了不同的方法，但无法让它正确显示，并且控制台总是给我同样的错误：

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

我希望有比我更有经验的人帮助我尝试解决这个问题。

结果应该是：（另一个div中的div类）

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

但是我得到的是：（另一个div下面的div）

风格：

 <style>
            .ipcl-embed {
                position: relative;
                padding-bottom: 56.25%;
                height: auto;
                overflow: hidden;
                background-color: #000000;
                border-radius: 5px;
                cursor:pointer;
            }
            .ipcl-embed-player {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
          </style>

脚本：

    <script>
...
                    var embedDiv = document.createElement('div');
                    embedDiv.className = 'ipcl-embed';
                    var embedId = 'ipcl-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>

Answer 1

代码中很少有错误：

• 期望：

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

但是代码：

                    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;

• 你应该在

  .ipcl-embed

  中创建另一个div，即

  .ipcl-embed-player

  附加它然后处理脚本
• 以正确的顺序处理节点插入

编辑脚本：

<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>