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

You cannot have a button ouside the `` element. Modern browsers will automatically move it to the end of the `` element. — ComFreek, Oct 31 '13 at 13:52
As you can check inspecting the DOM, the button is put inside the body. Can't be otherwise. — donkeydown, Oct 31 '13 at 13:54
Sorry for this unnecessary mess. Could have used a container instead of ``. Just tried to do it a easy way and found this principle, so was good for me. Thanx everyone. — Rajesh Paul, Oct 31 '13 at 14:03

score 3 · Accepted Answer · answered Oct 31 '13 at 13:55

actual browser may rewrite invalid html (and, writing elements outside is not really natural) . You can add an other surrounding div#id and use it to append correctly.

Try this (I also added quotes for element' ids):

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

I actually had this idea in mind after I got the unexpected result. So +1. — Rajesh Paul, Oct 31 '13 at 14:04

score 2 · Answer 2 · answered Oct 31 '13 at 13:57

Remove your clone button and Add below code into above tag,

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

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

score 0 · Answer 3 · answered Jun 13 '16 at 07:36

Another way to accomplish your goal is to move the button inside the <body> tag and put it at the end, but slightly modify the onClick action:

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

Elements outside is taken inside

3 Answers3