Question

我有以下代码：

<html>
    <head>
        <script>
        </script>

        <style>
        </style>
    </head>
    <body>
        <div id=div1 style="border:5px solid green" onClick="alert(this.id)">hi
            <div id=div2 style="border:2px solid yellow">hello</div>
            <div id=div3 style="border:2px solid red">world</div>
        </div>
    </body>
    <button onClick="document.body.appendChild(document.getElementById('div1').cloneNode(true));">cloneNode</button>
</html>

我想让div1的克隆显示在cloneNode按钮上方，因此将按钮保留在<body>之外。但每次单击cloneNode按钮时，新元素都会显示在cloneNode按钮下方，但我将新节点添加到<body>元素（使用appendChild()）和按钮在<body>元素之外。因此，在运行时<body>内包含或考虑<body>（脚本中指定的）以外的所有元素都是如此。请帮我理解这一点。

检查demo

Answer 1

实际的浏览器可能会重写无效的html（而且，写外部的元素并不是很自然）。您可以添加其他周围的div＃id并使用它来正确追加。

试试这个（我还添加了元素'id的引号）：

<html>
    <head>
        <script>
        </script>

        <style>
        </style>
    </head>
    <body>
         <div id="main">
        <div id="div1" style="border:5px solid green" onClick="alert(this.id)">hi
            <div id="div2" style="border:2px solid yellow">hello</div>
            <div id="div3" style="border:2px solid red">world</div>
        </div>
         </div>
      <button onClick="document.getElementById('main').appendChild(document.getElementById('div1').cloneNode(true));">cloneNode</button>

    </body>
</html>

Answer 2

删除克隆按钮并将以下代码添加到上面的代码

中

<div id="AppendSection"></div>
<button onClick="document.getElementById('AppendSection').appendChild(document.getElementById('div1').cloneNode(true));">cloneNode</button>

http://jsfiddle.net/t2K9U/2/

Answer 3

实现目标的另一种方法是移动在<{1}}标记内并将其放在最后，但稍微修改<body>操作：

onClick

外面的元素被带入里面

3 个答案: