Dom cloneNode 不起作用答案

【问题标题】：Dom cloneNode does not workDom cloneNode 不起作用
【发布时间】：2017-07-23 06:51:05
【问题描述】：

实际问题是我想在左侧生成五个图像并将其克隆到右侧，我的代码是：

 <html>
    <head>
    <style>
        img{
            position: absolute;
        }
        div{
            position: absolute;
            width: 500px;
            height: 500px;
        }
        #rightSide { left: 500px; 
                    border-left: 1px solid black;
        }

    </style>
    <script>
        // var numberOfFaces = 5;
        // var theLeftSide = document.getElementById("leftSide");
        function generateFaces(){
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            for (var i = 0; i < numberOfFaces; i++){
                var img = document.createElement("img");
                img.src = "smile.png";

                var randomTop = Math.random() * 400;
                var randomLeft = Math.random() * 400;
                img.style.top = randomTop + "px";
                img.style.left = randomLeft + "px";
                theLeftSide.appendChild(img);
            }
            var theRightSide = document.getElementById("rightSide");
            leftSideImages = theLeftSide.cloneNode(true);
            leftSideImages.removeChild(leftSideImages.lastChild);
            document.getElementById("rightSide").appendChild("leftSideImages");

        }

        window.onload = generateFaces;
    </script>
    </head>
    <body>
    <h1>Matching Game</h1>
    <p>click on the extra smiling face on the left</p>
    <div id = "leftSide">
    </div>
    <div id = "rightSide">
    </div>
    </body>

    </html>

错误消息是 jspart4.html:36 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': 参数 1 不是 'Node' 类型。在 generateFaces (jspart4.html:36)

有什么问题？

然后我想玩这个游戏，如果点击额外的微笑，生成更多，或者显示“游戏结束”，我的代码是：

function generateFaces(){

        var theLeftSide = document.getElementById("leftSide");
        for (var i = 0; i < numberOfFaces; i++){
            var img = document.createElement("img");
            img.src = "smile.png";

            var randomTop = Math.random() * 400;
            var randomLeft = Math.random() * 400;
            img.style.top = randomTop + "px";
            img.style.left = randomLeft + "px";
            theLeftSide.appendChild(img);
        }
        var theRightSide = document.getElementById("rightSide");
        leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        document.getElementById("rightSide").appendChild(leftSideImages);
        var theBody = document.getElementByTagName("body")[0];
        theLeftSide.lastChild.onclick = function nextLevel(event){
            event.stopPropagation();
            while (theBody.firstChild){
                theBody.removeChild(theBody.firstChild);
            }
            numberOfFaces += 5;
            generateFaces();
        }
        theBody.onclick = function gameover(){
            alert("Game Over");
            thBody.onclick = null;
            theLeftSide.lastChild.onclick = null;

        }

    }

但是当我点击额外的微笑或身体时，没有任何反应，你能帮忙解决吗？

【问题讨论】：

您的问题后面有一个删除按钮。下面的标签检查它你会发现它
添加有问题的代码而不是评论。

标签： javascript html

【解决方案1】：

你错了

document.getElementById("rightSide").appendChild("leftSideImages");

像这样从leftSideImages 中删除""

document.getElementById("rightSide").appendChild(leftSideImages);

 // var numberOfFaces = 5;
        // var theLeftSide = document.getElementById("leftSide");
        function generateFaces(){
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            for (var i = 0; i < numberOfFaces; i++){
                var img = document.createElement("img");
                img.src = "smile.png";

                var randomTop = Math.random() * 400;
                var randomLeft = Math.random() * 400;
                img.style.top = randomTop + "px";
                img.style.left = randomLeft + "px";
                theLeftSide.appendChild(img);
            }
            var theRightSide = document.getElementById("rightSide");
            leftSideImages = theLeftSide.cloneNode(true);
            leftSideImages.removeChild(leftSideImages.lastChild);
            document.getElementById("rightSide").appendChild(leftSideImages);

        }

        window.onload = generateFaces;

img{
            position: absolute;
        }
        div{
            position: absolute;
            width: 500px;
            height: 500px;
        }
        #rightSide { left: 500px; 
                    border-left: 1px solid black;
        }

<html>
    <body>
    <h1>Matching Game</h1>
    <p>click on the extra smiling face on the left</p>
    <div id = "leftSide">
    </div>
    <div id = "rightSide">
    </div>
    </body>

    </html>

【讨论】：

非常感谢，这两天刚开始用stackoverflow。
我有你的答案，并编辑新问题，谢谢