元素取內<BODY>

-5

<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

來源

2013-10-31 Rajesh Paul

您不能在''元素的外面有按鈕。現代瀏覽器會自動將其移動到''元素的末尾。 – ComFreek

我認爲你應該閱讀HTML標記和正確使用。 –

正如您可以檢查檢查DOM，按鈕放在身體內。不能以其他方式。 – donkeydown

實際的瀏覽器可能會改寫無效的HTML（和，外面寫的元素是不是真的自然）。您可以添加其他周圍的div＃id並使用它來正確追加。

試試這個（我還添加引號元素」 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>

來源

2013-10-31 13:55:11 Asenar

在得到意想不到的結果後，我確實有過這個想法。所以+1。 –

刪除您的克隆按鈕，添加以下代碼放到上面的標籤，

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

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

來源

2013-10-31 13:57:26

另一種方式要完成您的目標，請將內部的標籤內的<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>

來源

2016-06-13 07:36:43

元素取內<BODY>

回答

相關問題