javascript - Elements outside is taken inside

Question

I have the following code:

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

I wanted to make the clone of the div1 to appear above the cloneNodebutton and hence kept the button outside the <body>. But each time I click on the cloneNodebutton the new element appears below the cloneNodebutton although I appended the new node to the <body>element(using appendChild()) and the button is outside the <body> element. So, are all the elements even those outside the <body>(as specified in the script) included or considered inside the <body> at runtime. Please help me understand this.

Check the demo

score 2 · Accepted Answer

实际的浏览器可能会重写无效的 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>

score 2 · Accepted Answer

删除您的克隆按钮并将以下代码添加到上面的标签中，

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

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

score 0 · Accepted Answer

实现目标的另一种方法是将标签内的按钮移动<body>并放在最后，但稍微修改一下onClick操作：

<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>
        <button onClick="this.parentNode.insertBefore(document.getElementById('div1').cloneNode(true), this);">cloneNode</button>
    </body>
</html>

javascript - Elements outside is taken inside

3 回答 3

Related

Reference