使用append（）動態添加div

請通知我我解釋得好與否。我使用.append()在頁面內重複一個div。使用append（）動態添加div

HTML

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $("#num").click(function() { 
     $('#form').append("<div class='Box'>I'm new box by prepend</div>"); 
    }); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="form"> 
     Hai Add Another by clicking the button 
    </div> 
    <button id="num">Click Me</button> 
    /body> 
</html>

當我反覆添加一個div這工作不錯。但我喜歡像下面的代碼那樣在外部調用它。

<html> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("#num").click(function() { 
     $('#form').append($('#Box')); 
     }); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="form"> 
    Hai Add Another by clicking the button 
    </div> 
    <div class='Box'>I'm new box by prepend</div> 
    <button id="num">Click Me</button> 
/body> 
</html>

爲什麼這不起作用？

來源

2012-12-01 Vivek Dragon

嘗試使用clone()：

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $("#num").click(function() { 
    $(".Box:first").clone().appendTo("#form"); 
}); 
}); 
    </script> 
    </head> 

    <body> 
    <div id="form"> 
    Hai Add Another by clicking the button 
    </div> 
    <div class='Box'>I'm new box by prepend</div> 
    <button id="num">Click Me</button> 
</body> 
</html>

你必須將它添加之前創建一個新的元素。

Demo

來源

2012-12-01 05:10:22 bookcasey

感謝man但clone（）重複了以前創建的所有div內。我只想添加每個點擊一個div。有沒有其他的解決方案。 –

我的不好，試試'$（「。Box：first」）。clone（）'。答案已更新。 – bookcasey

感謝他的工作 –

嘗試這樣： -

$("#parent_div").append('<div id="created_div"></div>');

來源

2012-12-01 05:09:37

我想從html頁面外部添加一個div。 –

看看這個： - http://www.dynamicdrive.com/forums/showthread.php?28882-Load-external-page-into-lt-DIV-gt –

試試這個

$(document).ready(function(){ 
    $("#num").click(function() { 
     $(".Box").first().clone().appendTo("#form"); 
    }); 
});

來源

2012-12-01 05:16:11

其代碼 –

的工作表示感謝，如果您認爲代碼可以幫助您及其工作，請保留接受的答案，因爲這可能對未來的觀衆也有幫助。 – Raghurocks

使用append（）動態添加div

回答

相關問題