<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>克隆节点cloneNode()</title> <!-- node.cloneNode(true);完整克隆节点node及其所有子节点 node.cloneNode()/node.cloneNode(false);只克隆node及其本身的属性； --> <style> #div{ width: 300px; height: 30px; background: red; margin: 20px; } </style> </head> <body> <div id="div">我是老div</div> <script> var div=document.getElementById("div");//获取div var newdiv=div.cloneNode(true);//克隆div生成新的 newdiv.innerHTML+=",no,我是克隆的新div";//为新的div添加内容 document.body.insertBefore(newdiv,div);//将新的div放至老div前面 </script> </body> </html>