2011-11-29 94 views
0

我想将已定义的“旧div”标签的内容动态添加到“新div”标签中,但它不起作用。我试过的代码附在下面。 还有一个问题,如何动态删除附加的div标签?JavaScript在Div标签上动态添加另一个Div数据

<html> 
<head> 
<script type="text/javascript"> 

function add() { 

var i = document.getElementById('old'); 
var d = document.getElementById('new'); 
d.appendChild(i); 
} 
</script> 

</head> 
<body> 
<div id="old"> 
Content of old div 
</div> 

<div id="new"> 
</div> 
<button onclick="add()">Add</button> 
</body> 
</html> 
+1

这肯定是一个好主意。 –

回答

1

好的我解决了。我的代码出现了一些错误。它的工作现在。

<html> 
    <head> 
     <script type="text/javascript"> 

      function add() { 

     var i = document.getElementById('old'); 

     var d = document.createElement('div'); 
     d.id = "new1"; 
     d.innerHTML = i.innerHTML ; 
     var p = document.getElementById('new'); 

     p.appendChild(d); 

    } 

    function removeLocation() { 

     var d = document.getElementById('new1'); 

     var p = document.getElementById('new'); 

     p.removeChild(d); 

    } 
     </script> 

    </head> 
    <body> 
     <div id="old"> 
      Content of old div 
     </div> 

     <hr/> 
     <div id="new"> 
     </div> 
     <hr/> 
     <button onclick="add();">Add</button><br> 
     <button onclick="removeLocation();">Remove</button> 
    </body> 
    </html> 
4

试试这个

var i = document.getElementById('old'); 
var d = document.getElementById('new'); 
d.innerHTML += i.innerHTML; 
+0

很棒..你让它简单得多。我正在为你投票。 :-) –

+0

innerHTML不是一个美丽的方式,所以我建议使用appendChild代替它;) – user3252538